CSS Gradient Playground Guide: Linear, Radial, Conic, Mesh

Gradients went through an unfashionable decade. Somewhere between flat design winning and the App Store pushing hard edges, the gradient was reduced to a nostalgic throwback. Then color science caught up, conic gradients shipped, OKLCH made smooth interpolation actually smooth, and suddenly every other design system has a gradient somewhere — behind a hero, inside a pill, under a glowing button. The vocabulary is back, and it is richer than it was the first time around.

This post walks through the four gradient types in modern CSS: linear, radial, conic, and the emerging mesh gradient syntax. We will cover the syntax that actually ships today, the color interpolation model that matters more than people realize, and the playgrounds that let you iterate on a gradient in seconds rather than typing percentages blind.

Linear gradients

The bread and butter. A linear gradient interpolates colors along a line. The syntax is simple:

background: linear-gradient(135deg, #ff6b6b, #feca57);

The angle decides the direction. 0deg goes bottom to top. 90deg goes left to right. 180deg goes top to bottom. You can use keywords instead: to right, to bottom right, etc. You can add color stops with explicit positions to control where each color sits on the line:

background: linear-gradient(
  90deg,
  #0ea5e9 0%,
  #6366f1 50%,
  #a855f7 100%
);

Two tricks that are easy to miss. First, you can repeat a color stop at the same position to create a hard stripe: linear-gradient(90deg, red 0 50%, blue 50% 100%) produces a sharp color boundary at the midpoint, no fade. Second, repeating-linear-gradient tiles the gradient pattern endlessly, useful for stripes and subtle texture overlays.

Prototype linear gradients visually with Color Gradient Generator, which gives you a live preview and copies the exact CSS when you are done. The MDN linear-gradient reference is the authoritative spec-aligned documentation if you need the full grammar.

Radial gradients

Radial gradients emanate from a point. The shape can be a circle or an ellipse; the size can be specified explicitly or derived from the container.

background: radial-gradient(
  circle at 30% 30%,
  #fff 0%,
  #1e293b 80%
);

The circle at 30% 30% positions the center thirty percent from the left and thirty percent from the top. The color stops work the same as in a linear gradient. The main knobs beyond position are shape (circle or ellipse) and size (closest-side, farthest-corner, or explicit length).

Radial gradients are the workhorse for "soft glow" effects, spotlight highlights, and vignettes. A slightly off-center radial gradient from white to translucent black, layered over a photo, makes the image feel three-dimensional without changing the photo itself.

Conic gradients

Conic gradients rotate around a center point. The color sweeps angularly rather than radially — think pie chart, not spotlight. They shipped in all modern browsers and are finally the right answer for a huge class of designs that used to require SVG.

background: conic-gradient(
  from 0deg at 50% 50%,
  #ff6b6b 0deg,
  #feca57 120deg,
  #48dbfb 240deg,
  #ff6b6b 360deg
);

The most obvious use case is pie charts — a three-color conic gradient with hard stops produces a chart with no JavaScript, no SVG, just CSS. More interestingly, conic gradients produce the iridescent "holographic" surface effects that dominated interface design circa 2024, and animating the from angle creates a spinning sweep that is perfect for loading states.

To animate a conic gradient (and gradients in general), the trick is to animate a CSS variable rather than the gradient string itself — gradients are not directly animatable, but custom properties feeding into them are, if you register them with @property. CSS Gradient Animator sets up the property registration, the keyframes, and the resulting declaration so the animation actually runs in production.

Mesh and multi-gradient techniques

Mesh gradients — the organic, blob-like backgrounds you see in modern SaaS landing pages — are not a first-class primitive in CSS yet. The spec is being drafted, but shipping support is spotty. The current technique is to layer multiple radial gradients with transparency to approximate the effect:

background:
  radial-gradient(at 20% 30%, #ff6b6b80, transparent 50%),
  radial-gradient(at 80% 20%, #6366f180, transparent 50%),
  radial-gradient(at 50% 80%, #10b98180, transparent 50%),
  #0f172a;

Three radial gradients with 50% alpha stacked over a dark base produce a convincing mesh effect. Adjust positions and colors until it looks right. Mesh Gradient Generator provides a drag-and-drop interface for positioning the sources and tuning the blend, then outputs the stacked CSS. For large text rendered with gradient fills (the "set your headline on fire" technique), Gradient Text Generator handles the background-clip: text incantation.

Color interpolation and OKLCH

The underrated story of modern CSS gradients is the color interpolation model. By default, gradients interpolate in sRGB, which is exactly what you learned to expect and exactly what produces the muddy gray midpoints when you blend red to blue. The fix, specified in CSS Color Module Level 4, is to interpolate in a perceptually uniform color space like OKLCH or OKLab:

background: linear-gradient(in oklch, red, blue);

That one addition — in oklch — produces a gradient that stays vivid through the midpoint. The muddy gray is gone. This single change makes gradients feel dramatically more modern with zero design effort, and it is supported in every current browser. It is the closest thing to a free design upgrade available today.

For picking the color endpoints, Color Picker handles hex, RGB, HSL, and OKLCH with live previews. To build out a matching palette that uses the gradient colors plus complementary accents, Color Palette Generator produces swatches that harmonize. The MDN color values reference is the complete list of what each function accepts.

Performance and accessibility

Gradients are cheap — the browser renders them on the GPU and they cost almost nothing for static elements. The place where gradients bite performance is animation. Animating a gradient forces a repaint every frame, and on low-end devices that repaint can drop to 30fps. Two workarounds. First, animate a transform on a gradient-filled pseudo-element instead of animating the gradient stops directly. The parent gradient stays static while the pseudo-element translates, rotates, or scales across it, and the compositor handles the transform without a full repaint. Second, register custom properties with @property so the browser knows the type and initial value; typed custom properties can interpolate on the compositor where untyped ones cannot.

Accessibility matters too. Text placed over a vivid gradient often fails contrast checks on the midpoints, even if it passes at the endpoints. The pragmatic fix is to add a semi-transparent dark or light overlay between the gradient and the text — a flat rgba plate behind the heading instantly rescues contrast without killing the gradient. Always test the worst-case position, not just the average, and remember that the background-attachment and resize behavior can shift which point the text overlaps. Respect prefers-reduced-motion too: users who have turned off animations should not see your loading gradient spinning endlessly, and honoring this preference is a one-line media query away.

Adjacent tools worth bookmarking

More design utilities that round out gradient work: Color Converter for translating between hex, HSL, and OKLCH, Contrast Ratio Checker for verifying text legibility over gradient backgrounds, CSS Filter Generator when you want to layer a blur or saturation tweak on top of a gradient, and CSS Clip-Path Generator for shaping the element a gradient fills.

Related pillar guide

This cluster post is part of the design and image track. For the broader foundation on optimizing visuals for the web — formats, compression, responsive images, and the full toolkit — see Image Optimization: The Complete Guide.

FAQ

Why does my red-to-blue gradient look gray in the middle?

Default sRGB interpolation. Switch to linear-gradient(in oklch, red, blue) and the gray vanishes. This is supported in all modern browsers and is the single biggest "free upgrade" in CSS gradients.

Can I animate gradients?

Not directly — the gradient string is not animatable. But you can register custom properties with @property, reference them in the gradient, and animate the properties. That produces smooth animation.

Which gradient type is best for backgrounds?

Linear for banners and sections. Radial for spotlight effects or soft vignettes. Conic for circular visualizations and iridescent effects. Mesh-style stacked radials for organic landing pages. They all have legitimate uses; the choice is aesthetic.

Do gradients impact SEO?

Not directly. They are pure visual styling. They can indirectly hurt accessibility scores if text on top of them fails contrast, which can affect Core Web Vitals signals for accessibility. Always verify contrast on the worst-case position.

How do I make a gradient look good in dark mode?

Use different color stops in each mode. A gradient that works at white-to-yellow on light will look washed out on dark; you want darker saturated colors on dark backgrounds. Define the gradient via CSS custom properties and swap them under @media (prefers-color-scheme: dark).

Closing thought

The gradient toolkit is wider than most designers realize, and the default interpolation model has been quietly upgraded so that gradients actually look the way designers always wanted them to. Spend half an hour playing in a browser gradient generator, switching interpolation to OKLCH, and the field opens up.