DEV Community

Snappy Tools
Snappy Tools

Posted on

CSS Gradients in 2026: Linear, Radial, and Conic — A Complete Reference

#css #webdev #frontend #beginners

CSS gradients are one of those features that look simple until you try to do something precise with them. Here's everything you need to know — syntax, angles, colour stops, and the patterns that show up in real projects.

The Three Types

1. Linear Gradient 

background: linear-gradient(direction, color-stop1, color-stop2, ...);
Enter fullscreen mode Exit fullscreen mode

Direction can be:

  • An angle: 45deg, 135deg
  • A keyword: to right, to bottom right, to top 
/* Left to right */
background: linear-gradient(to right, #2f855a, #68d391);

/* 45° diagonal */
background: linear-gradient(45deg, #667eea, #764ba2);

/* Three stops */
background: linear-gradient(to right, #f6d365, #fda085, #f093fb);
Enter fullscreen mode Exit fullscreen mode

Angle reference:

  • 0deg = bottom to top
  • 90deg = left to right
  • 180deg = top to bottom (same as to bottom)
  • 270deg = right to left

2. Radial Gradient 

background: radial-gradient(shape size at position, start-color, end-color);
Enter fullscreen mode Exit fullscreen mode 
/* Default: ellipse from center */
background: radial-gradient(circle, #667eea, #764ba2);

/* Circle in top-left corner */
background: radial-gradient(circle at 20% 20%, #ffecd2, #fcb69f);

/* Closest-side sizing */
background: radial-gradient(circle closest-side at 60px 60px, #a8edea, #fed6e3);
Enter fullscreen mode Exit fullscreen mode

Size keywords: closest-side, closest-corner, farthest-side, farthest-corner

3. Conic Gradient 

background: conic-gradient(from angle at position, color-stops);
Enter fullscreen mode Exit fullscreen mode

Good for pie charts, colour wheels, and angular patterns:

/* Pie chart: 30% red, 50% blue, 20% green */
background: conic-gradient(red 0% 30%, blue 30% 80%, green 80% 100%);

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
Enter fullscreen mode Exit fullscreen mode

Colour Stops — The Tricky Part

You can position stops precisely using px, %, or viewport units:

/* Hard stop (no fade) */
background: linear-gradient(to right, 
  #2f855a 50%, 
  #68d391 50%
);

/* Multi-stop with precise positions */
background: linear-gradient(to right,
  #f6d365 0px,
  #fda085 80px,
  #f093fb 200px
);

/* Hint: control the midpoint of the blend */
background: linear-gradient(to right, #2f855a 20%, 40%, #68d391 80%);
Enter fullscreen mode Exit fullscreen mode

Repeating Gradients 

/* Stripes */
background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  #2f855a 10px,
  #2f855a 20px
);

/* Rings */
background: repeating-radial-gradient(
  circle at center,
  transparent,
  transparent 20px,
  #667eea 20px,
  #667eea 21px
);
Enter fullscreen mode Exit fullscreen mode

Common Patterns in Real Projects

Use case Gradient type Example
Hero background Linear, 135deg #667eea → #764ba2
Card overlay Linear, to bottom transparent → rgba(0,0,0,0.6)
Progress bar Linear, to right #2f855a → #68d391
Radial spotlight Radial circle rgba(255,255,255,0.3) → transparent
Pie chart Conic red 30%, blue 30%
Diagonal stripe Repeating linear 45deg transparent/colour pattern

Browser Support

All three gradient types (linear-gradient, radial-gradient, conic-gradient) are supported in all modern browsers. Conic gradients are the newest — they've been in Chrome since 69, Firefox since 83, and Safari since 12.1.

No prefixes needed in 2026.

Generate Without the Maths

If you'd rather see the result than work out the syntax, the SnappyTools Gradient Generator lets you pick colours, adjust the angle, and copy the CSS directly. Supports linear and radial, with live preview on a real element.

What gradient patterns do you use most? Linear hero overlays, or do you actually use conic gradients in prod?

Top comments (0)