Core Code
Core Code Modern Dev Handbook

Linear Gradient Multiple Colors

Gradients can blend multiple color stops.

Preview

Code

<style>
.box{
width:180px;
height:100px;
background:linear-gradient(90deg,#2563eb,#22c55e,#f59e0b);
}
</style>

<div class="box"></div>

More CSS Gradients Examples (8)

example Linear Gradient Basic open example example Linear Gradient Direction open example example Radial Gradient open example example Radial Gradient Position open example example Conic Gradient open example example Repeating Gradient open example example Gradient Overlay open example example Gradient Text open example