CSS Gradients Guide: Linear, Radial, Conic & Mesh Effects

Linear Gradients

The most common. Colors transition along a straight line between two points. The angle (or direction keyword) controls where the gradient runs:

/* Angle syntax */
background: linear-gradient(135deg, #7c5cfc, #ec4899);

/* Direction keyword (more readable) */
background: linear-gradient(to right, #7c5cfc, #ec4899);
background: linear-gradient(to bottom right, #7c5cfc, #ec4899);

/* Multiple color stops */
background: linear-gradient(to right, #7c5cfc 0%, #ec4899 50%, #f59e0b 100%);

Angle convention: 0deg points up, 90deg to the right, 180deg down, 270deg left. Default direction (no angle specified) is to bottom (180deg).

Color Stops

Each color can specify a position percentage or length where it should be "fully" that color. Stops between hold a smooth transition:

/* Sharp color boundary (looks like stripes) */
background: linear-gradient(to right, #7c5cfc 50%, #ec4899 50%);

/* Smooth transition with middle hold */
background: linear-gradient(to right, #7c5cfc 0%, #7c5cfc 20%, #ec4899 80%, #ec4899 100%);

/* Modern interpolation hint (controls curve shape) */
background: linear-gradient(to right, #7c5cfc, 30%, #ec4899);

Radial Gradients

Colors emanate from a point outward in a circle or ellipse:

/* Default: ellipse at center */
background: radial-gradient(#7c5cfc, transparent);

/* Shape and position */
background: radial-gradient(circle at top left, #7c5cfc, transparent);
background: radial-gradient(ellipse at 30% 70%, #7c5cfc, transparent);

/* Size keywords */
background: radial-gradient(circle closest-corner, #7c5cfc, transparent);
background: radial-gradient(circle farthest-side, #7c5cfc, transparent);

/* Explicit radius */
background: radial-gradient(circle 200px at center, #7c5cfc, transparent);

Use radial gradients for spotlight effects, subtle atmospheric backgrounds, and button glow states. Multiple overlapping radials fading to transparent create rich "dreamy" page backgrounds.

Conic Gradients

Colors rotate around a center point — like a pie chart. Added to browsers around 2020:

/* Basic conic (rainbow sweep) */
background: conic-gradient(red, yellow, green, blue, red);

/* From angle + position */
background: conic-gradient(from 45deg at center, #7c5cfc, #ec4899, #7c5cfc);

/* Pie chart */
background: conic-gradient(
  #7c5cfc 0deg 90deg,
  #ec4899 90deg 200deg,
  #f59e0b 200deg 360deg
);

/* Color wheel */
background: conic-gradient(
  hsl(0, 80%, 60%),
  hsl(60, 80%, 60%),
  hsl(120, 80%, 60%),
  hsl(180, 80%, 60%),
  hsl(240, 80%, 60%),
  hsl(300, 80%, 60%),
  hsl(360, 80%, 60%)
);

Gradient Text

The "rainbow heading" trick that's everywhere in modern web design:

.gradient-text {
  background: linear-gradient(135deg, #7c5cfc, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

The element gets a gradient background, then the background is clipped to just the text shape, with text itself set to transparent so the gradient shows through. Include both prefixed and unprefixed properties for Safari.

Mesh-Style Gradients

"Mesh gradients" (the blurry multi-color backgrounds popular since 2021) aren't actually a CSS feature. They're layered radial gradients faded to transparent:

.mesh-bg {
  background-color: #0a0a1a;
  background-image:
    radial-gradient(at 20% 30%, rgba(124, 92, 252, 0.4) 0px, transparent 50%),
    radial-gradient(at 80% 10%, rgba(236, 72, 153, 0.3) 0px, transparent 50%),
    radial-gradient(at 40% 90%, rgba(245, 158, 11, 0.3) 0px, transparent 50%),
    radial-gradient(at 90% 70%, rgba(16, 185, 129, 0.25) 0px, transparent 50%);
}

Each radial is a soft blob of color fading to transparent. Stacking 3-5 at different positions and colors creates the "mesh" illusion. Bonus: much cheaper than animated WebGL equivalents.

Animated Gradients

CSS doesn't animate gradient color stops directly — you have to animate a larger-than-container gradient's position:

.animated-gradient {
  background: linear-gradient(135deg, #7c5cfc, #ec4899, #f59e0b, #7c5cfc);
  background-size: 300% 300%;
  animation: shift 8s ease infinite;
}

@keyframes shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Key trick: background-size: 300% 300% makes the gradient bigger than the element. Animating background-position slides the oversized gradient, creating the illusion of color shift.

Gradient Borders

border-image supports gradients, but with limitations on border-radius:

/* Works for square borders only */
.gradient-border {
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, #7c5cfc, #ec4899) 1;
}

/* For rounded corners, use background layering */
.gradient-border-rounded {
  border-radius: 12px;
  padding: 2px;
  background:
    linear-gradient(#0a0a1a, #0a0a1a) padding-box,
    linear-gradient(135deg, #7c5cfc, #ec4899) border-box;
  border: 2px solid transparent;
}

Color Space: Why Modern Gradients Look Better

Traditional CSS gradients interpolate in sRGB color space. Modern CSS supports specifying interpolation color space for smoother, more vibrant transitions:

/* Old: can produce muddy mid-colors */
background: linear-gradient(to right, blue, yellow);

/* New: smoother perceptual interpolation */
background: linear-gradient(in oklch to right, blue, yellow);
background: linear-gradient(in oklab to right, blue, yellow);

The oklch and oklab color spaces produce perceptually uniform transitions — no muddy grays in the middle of blue-to-yellow gradients. Supported in Chrome, Safari, and Firefox since 2023.

Performance Notes

Gradients are fast — modern browsers render them on the GPU. Even complex multi-stop gradients don't measurably slow rendering.
Animation considerations — animating background-position forces repainting. For high-FPS animations on mobile, consider a pre-rendered image or WebGL alternative.
Layered gradients are fine — 5-10 stacked gradients render as fast as one. Don't feel limited.
File size — a gradient in CSS is ~200 bytes; a background image is 10-100KB. Always prefer CSS when possible.

Frequently Asked Questions

Why does my gradient look banded / striped on screens?: On 8-bit displays, gradients over large areas show visible stepping between similar colors. Fix: add subtle noise via background-image: url('noise.png'), linear-gradient(...), or use oklch color space for smoother perceptual transitions.
Can I use gradients on SVG elements?: SVG has its own gradient syntax (<linearGradient> and <radialGradient> defined in <defs>, referenced via fill="url(#id)"). CSS gradients only work on CSS properties (background, border-image), not SVG fill. See our SVG Wave Divider guide for the SVG syntax.
How do I make a gradient border around an image?: Wrap the image in a div with padding, use the layered background technique shown above. Alternatively, use border-image for square borders only. A gradient-border utility with position: relative and an ::after pseudo-element that creates the gradient behind works well for complex cases.
Can I repeat a gradient pattern?: Yes — use repeating-linear-gradient() or repeating-radial-gradient() with color stops that fall inside the size range. Classic use: stripes via repeating-linear-gradient(45deg, #7c5cfc 0 10px, transparent 10px 20px).
Why do gradients look different in Figma vs my website?: Figma uses perceptually linear interpolation by default. Browser CSS (pre-2023) uses sRGB interpolation. Match Figma's appearance by using linear-gradient(in oklab to right, ...) — available in modern browsers.