CSS Gradients

Linear gradients

A gradient is a value for background (no image needed). linear-gradient() blends colours in a straight line; you set the direction and colour stops.

<style>
  .g1 { background: linear-gradient(to right, #4338ca, #06b6d4); }
  .g2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
  .g3 { background: linear-gradient(#8b5cf6, #ec4899, #f59e0b); }
  .box { height: 70px; color: #fff; padding: 12px; margin-bottom: 8px; border-radius: 8px; }
</style>
<div class="box g1">to right: indigo → cyan</div>
<div class="box g2">135deg: amber → red</div>
<div class="box g3">three colour stops</div>

All three are values for background — no image file involved. The difference is the first part, which sets the direction, and the colours, which are the stops it blends between:

• to right — blends from the first colour on the left to the last on the right.
• 135deg — blends along an angle (135 degrees is a diagonal, top-left to bottom-right).
• The third box lists three colours, so the blend passes through all of them in order.

Radial & conic

Two more gradient shapes. radial-gradient() blends colours outward from a centre point (like a glow), and conic-gradient() blends them around a centre point (like slices of a pie). Below, the same two colours are used in a radial circle and a multi-colour conic sweep:

<style>
  .r { background: radial-gradient(circle, #06b6d4, #4338ca); }
  .c { background: conic-gradient(#ef4444, #f59e0b, #10b981, #4338ca, #ef4444); }
  .box2 { height: 90px; border-radius: 50%; width: 90px; display: inline-block; margin: 6px; }
</style>
<div class="box2 r"></div>
<div class="box2 c"></div>

Both boxes are circles (border-radius: 50%), but the fill differs. radial-gradient(circle, ...) blends outward from the centre like a glow or a sphere. conic-gradient(...) sweeps the colours around the centre like a pie chart or colour wheel — which is why the second circle looks like a spun rainbow.