Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a gradient background that smoothly transitions between multiple colors?
Asked on Apr 24, 2026
Answer
To create a gradient background that smoothly transitions between multiple colors, you can use the CSS `linear-gradient` function. This allows you to specify multiple color stops and angles for the gradient effect.
<!-- BEGIN COPY / PASTE -->
<style>
.gradient-background {
height: 100vh;
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<div class="gradient-background">
<!-- Content goes here -->
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The `linear-gradient` function creates a gradient along a straight line, which can be angled using degrees (e.g., 45deg).
- You can specify as many color stops as needed, and they will transition smoothly from one to the next.
- For more complex gradients, consider using `radial-gradient` or `conic-gradient` for different effects.
- Ensure the container (e.g., `.gradient-background`) has a defined height or content to display the gradient properly.
Recommended Links:
