CSS Gradients: Complete Guide to Linear, Radial & Conic

CSS gradients replace static background images with dynamic, resolution-independent color transitions rendered by the browser. They're lighter than images, infinitely scalable, and animatable. Here's everything you need to know.

Linear Gradients

The most common gradient type. Colors transition along a straight line defined by direction or angle.

/* Basic: top to bottom */
background: linear-gradient(#713EFD, #FB3100);

/* With angle */
background: linear-gradient(135deg, #713EFD, #FB3100);

/* Multiple stops */
background: linear-gradient(90deg, 
  #713EFD 0%, 
  #FB3100 50%, 
  #FFD915 100%
);

/* With position control */
background: linear-gradient(90deg, 
  #713EFD 0% 30%,    /* purple from 0-30% */
  #FB3100 30% 70%,    /* red from 30-70% */
  #FFD915 70% 100%    /* yellow from 70-100% */
);

Radial Gradients

Colors radiate outward from a center point in a circular or elliptical shape.

/* Basic circle */
background: radial-gradient(circle, #713EFD, transparent);

/* Ellipse at specific position */
background: radial-gradient(ellipse at 30% 50%, 
  #713EFD, 
  #282625
);

/* Sized */
background: radial-gradient(circle 200px at center, 
  #713EFD, 
  transparent
);

Conic Gradients

Colors transition around a center point (like a color wheel or pie chart). The newest gradient type.

/* Color wheel */
background: conic-gradient(
  red, yellow, lime, aqua, blue, magenta, red
);

/* Pie chart */
background: conic-gradient(
  #713EFD 0% 40%, 
  #FB3100 40% 70%, 
  #FFD915 70% 100%
);

/* With starting angle */
background: conic-gradient(from 45deg, #713EFD, #FB3100);

Repeating Gradients

All three types have repeating variants for creating stripe patterns:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #713EFD 0px 10px,
  transparent 10px 20px
);

/* Concentric circles */
background: repeating-radial-gradient(
  circle,
  #713EFD 0px 10px,
  transparent 10px 20px
);

Modern Techniques

• Layering: Stack multiple gradients with background: gradient1, gradient2;
• Animation: Animate gradient position with background-position or CSS @property for smooth color transitions.
• Text gradients: Use background-clip: text with a gradient background for colorful text.
• Mesh-like gradients: Layer multiple radial gradients at different positions for organic, multi-color blends.

Browser Support

All gradient types are supported by every modern browser. No vendor prefixes needed in 2026. Conic gradients (the newest) have had full support since Chrome 69, Firefox 83, Safari 12.1, and Edge 79.

Create Gradients Visually

Writing gradient CSS by hand is tedious. Use our free CSS Gradient Maker to visually create linear, radial, and conic gradients. Add color stops, adjust angles, and copy the generated CSS with one click. For more complex organic blends, try our Mesh Gradient Generator.