CSS Gradients: The Complete Guide

CSS gradients let you create smooth color transitions without images — from simple two-color fades to complex mesh-like effects. This guide covers all three gradient functions, color stop tricks, repeating patterns, and gives you copy-paste recipes. Want to build gradients visually? Use the free gradient generator →

How CSS gradients work

CSS gradients are generated images — they're values for the background-image property (though background shorthand works too). The browser interpolates between the color stops you define:

/* Linear — top to bottom by default */
background: linear-gradient(#8b5cf6, #06b6d4);

/* With an angle */
background: linear-gradient(135deg, #8b5cf6, #06b6d4);

/* Multiple stops */
background: linear-gradient(90deg, #f43f5e 0%, #8b5cf6 50%, #06b6d4 100%);

The three gradient functions

linear-gradient()

Colors transition along a straight line. Control the direction with angles (135deg) or keywords (to right, to bottom left):

background: linear-gradient(to right, #1e1b4b, #312e81, #4338ca);

radial-gradient()

Colors radiate outward from a center point. Control the shape (circle or ellipse) and position:

/* Circle from center */
background: radial-gradient(circle, #8b5cf6, #0f0f14);

/* Ellipse from top-left */
background: radial-gradient(ellipse at 20% 30%, #06b6d4, transparent);

conic-gradient()

Colors sweep around a center point like a color wheel. Great for pie charts and decorative effects:

background: conic-gradient(from 45deg, #f43f5e, #8b5cf6, #06b6d4, #f43f5e);

Live demo

Color stop positioning

Each color stop can have a position (percentage or length). This controls where the transition happens:

/* Hard edge at 50% — no smooth transition */
background: linear-gradient(90deg, #8b5cf6 50%, #06b6d4 50%);

/* Weighted: purple dominates */
background: linear-gradient(135deg, #8b5cf6 70%, #06b6d4 100%);

/* Color hint: midpoint at 30% instead of 50% */
background: linear-gradient(#8b5cf6, 30%, #06b6d4);

Copy-paste gradient recipes

/* Sunset */
background: linear-gradient(135deg, #f43f5e, #f97316, #facc15);

/* Ocean */
background: linear-gradient(135deg, #0ea5e9, #06b6d4, #14b8a6);

/* Purple haze */
background: linear-gradient(135deg, #7c3aed, #8b5cf6, #a78bfa);

/* Dark overlay (for text on images) */
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

/* Mesh-like (layered radials) */
background:
  radial-gradient(ellipse at 20% 50%, rgba(139,92,246,0.3), transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.3), transparent 50%),
  radial-gradient(ellipse at 50% 80%, rgba(244,63,94,0.2), transparent 50%),
  #0f0f14;

Repeating gradients

Wrap any gradient function with repeating- to tile the pattern:

/* Stripes */
background: repeating-linear-gradient(
  45deg,
  #8b5cf6 0px, #8b5cf6 10px,
  #7c3aed 10px, #7c3aed 20px
);

/* Bullseye */
background: repeating-radial-gradient(
  circle,
  #0f0f14 0px, #0f0f14 10px,
  #1e1e28 10px, #1e1e28 20px
);

Gradients in Tailwind CSS

Tailwind has built-in gradient utilities:

<div class="bg-gradient-to-br from-violet-500 via-purple-500 to-cyan-500">
  Gradient card
</div>

Directions: bg-gradient-to-r (right), bg-gradient-to-br (bottom-right), etc. For radial or conic gradients, use arbitrary values:

<div class="bg-[radial-gradient(circle,_#8b5cf6,_#0f0f14)]"></div>

Accessibility

• Text contrast. If you put text on a gradient, check contrast at both the lightest and darkest points. Tools like WebAIM's contrast checker help.
• Motion sensitivity. Animated gradients should respect prefers-reduced-motion.
• Fallback color. Always set a solid background-color before the gradient in case it doesn't render.

Browser support

linear-gradient() and radial-gradient() are supported everywhere. conic-gradient() is supported in all modern browsers. No prefixes needed in 2026.

FAQ

What is the difference between linear, radial, and conic gradients?

Linear gradients transition colors along a straight line (top to bottom, left to right, or any angle). Radial gradients radiate outward from a center point in a circle or ellipse. Conic gradients sweep colors around a center point like a color wheel.

How do I make a hard edge in a gradient?

Set two adjacent color stops to the same position: linear-gradient(90deg, #8b5cf6 50%, #06b6d4 50%). This creates a sharp line instead of a smooth transition — useful for stripes and flags.

Can I layer multiple gradients?

Yes. Comma-separate multiple gradient values in the background property. Each one layers on top of the previous. Use transparent in your stops to let lower layers show through — this is how you create mesh-like effects.

Do CSS gradients need vendor prefixes?

No. All three gradient functions (linear, radial, conic) are supported unprefixed in all modern browsers.

Related tools