What's the difference between linear, radial, and conic gradients?

Linear flows along a single direction (specified by an angle). Radial flows outward from a center point in concentric ellipses. Conic sweeps around a center point like the second hand of a clock — useful for pie charts, color wheels, and loading rings.

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

Default sRGB interpolation crosses through the geometric center of the color cube, which for opposite hues lands near gray or black. Switch interpolation to OKLCH ('linear-gradient(in oklch, red, blue)') and the midpoint will be vibrant purple — the perceptually correct path.

What's a 'hard stop'?

Two stops at the same position create an abrupt transition with no blend — used for stripes, pies, and any boundary you don't want smoothed. Example: 'red 0 50%, blue 50% 100%' is a half-red, half-blue with a sharp edge.

Can I use a gradient as a text color?

Yes — apply 'background-image: linear-gradient(...)', then 'background-clip: text; color: transparent; -webkit-background-clip: text;'. The text shows the gradient through itself. Note that contrast against the page background is harder to compute, so test legibility manually.

What does 'longer hue' mean in HSL interpolation?

When blending two hues in HSL or OKLCH, the interpolation can take the short way around the hue wheel ('shorter hue', the default) or the long way ('longer hue'). Long-way is how you get rainbow-style multi-color sweeps from just two stops.

How do I add ease curves to a gradient?

Use the 'color-interpolation-hint' syntax: 'linear-gradient(red, 25%, blue)'. The middle value isn't a color stop — it's a hint that shifts where the 50/50 blend point lands. Use values below 50% to ease in, above to ease out.

CSS

CSS Gradient Generator

Build linear, radial, and conic CSS gradients with unlimited stops, angle control, and color-space interpolation. Live preview and one-click ready-to-paste CSS output.

Linear, radial, and conic gradients in one canvas
Unlimited stops with drag-to-reorder and precise position input
Interpolate in sRGB, OKLCH, OKLab, or HSL — no more muddy midpoints
Hard stops, ease hints, and conic angle control

Direct answer

Pick a gradient type, add color stops, and the generator emits the spec-compliant CSS string. Use linear-gradient() for stripes, radial-gradient() for spotlights, and conic-gradient() for pies, color wheels, and loading rings. Interpolate in OKLCH to avoid the gray midpoint that plagues default sRGB blends.

Type

Angle135°

Stops

CSS

background-image: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

When this saves you time

Real workflows where css gradient generator replaces tedious manual work or an in-app subscription tool.

Marketing

Hero section gradient with brand colors

Build a linear-gradient(135deg, ...) running from the brand primary to a slightly lighter accent. Interpolate in OKLCH so the midpoint stays vibrant instead of going gray.

Buttons

Subtle CTA highlight

A short top-to-bottom linear gradient from #2563EB to #1D4ED8 gives a button physical depth without leaving the brand color. 4–6% lightness delta is the sweet spot.

Backgrounds

Mesh-style multi-radial backgrounds

Layer three radial-gradient() values at different positions to fake a mesh gradient with native CSS — no SVG, no Canvas, fully accessible and scalable.

Data viz

Conic gradient as a donut chart

A single conic-gradient with hard stops at percentage positions renders a donut in one CSS declaration. No charting library, no SVG paths.

Loaders

Spinning gradient ring

Combine conic-gradient with mask-image to make a rotating loading ring. CSS-only, GPU-accelerated, ~200 bytes of code.

Decoration

Glassmorphism-style soft glow

Large radial-gradient with the brand color at 20% opacity, centered behind a frosted card. Adds depth without committing to the trend's heavier blur effects.

How it works

The methodology — every transformation documented so the output is reproducible.

Pick a gradient type

Linear flows along an angle. Radial flows outward from a center. Conic sweeps around an angle. Pick the right primitive — converting between them after the fact is rarely clean.

Place color stops

Each stop has a color and a position (0–100%). Add as many as you want. Two stops at the same position create a hard stop — useful for stripes, pies, and progress fills.

Choose an interpolation space

CSS Color Level 4 lets you specify how colors blend between stops: 'in oklch' avoids gray midpoints, 'in hsl longer hue' goes the long way around the wheel for rainbow effects.

Copy production CSS

The output is a single CSS declaration ready to paste. The generator also emits Tailwind v3 background-image utilities and a backward-compatible sRGB fallback for browsers without Color Level 4 support.

Worked examples

Input	Result	Notes
Linear · 135deg · sky blue → indigo	linear-gradient(135deg in oklch, #0EA5E9, #6366F1)	Common SaaS hero. OKLCH keeps the midpoint vibrant instead of muddy.
Radial · circle at center · spotlight	radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3), transparent 70%)	Soft white halo for glassmorphism. Transparent at 70% means smooth fade-out.
Conic · 25% progress · accent	conic-gradient(#2563EB 0 25%, #E5E7EB 25% 100%)	Hard stops at 25% — instant donut/progress ring with one CSS rule.
Linear · 90deg · 3-color sunset	linear-gradient(90deg in oklch, #FB923C 0%, #EF4444 50%, #7C3AED 100%)	Three stops, equally spaced, blending in perceptual space.
Conic · rainbow color wheel	conic-gradient(in hsl longer hue, red, red)	Two identical stops with 'longer hue' interpolation traverses the whole hue wheel.

Common mistakes to avoid

Letting sRGB interpolation produce gray midpoints

A blend from #FF0000 to #0000FF in sRGB passes through near-black at 50%. Specify 'in oklch' or 'in oklab' to keep the midpoint vibrant — this is one line of CSS and the biggest visual upgrade for gradients in a decade.

Using too many stops

Past 4–5 stops, the gradient starts looking like a stripe pattern, not a gradient. Use fewer stops with carefully chosen positions, or hide complexity behind a blur layer.

Forgetting browser fallback

Color-space interpolation ('in oklch') needs Chrome 111+, Safari 16.4+, Firefox 113+. For older browsers, emit a plain linear-gradient fallback first, then override with the interpolation-aware version.

Putting text directly on a gradient

WCAG contrast is computed pair-wise. Sample the worst-case point of the gradient under the text and run it through the contrast checker — or add a solid scrim layer behind the text.

Frequently Asked Questions

The interpolation space revolution

CSS Color Module Level 4 added a quiet but huge feature: interpolation space selection. Until 2023, every gradient blended in sRGB — fine for similar hues, ugly for opposite ones. The 'in oklch' or 'in oklab' qualifier tells the browser to do the blend math in a perceptually uniform color space, where the “straight line” between two colors stays in the vibrant region of the gamut instead of dipping through gray.

The practical impact is dramatic. A gradient from #0EA5E9 (cyan) to #F97316 (orange) in sRGB has a dead muddy region near 50%. The same gradient in OKLCH stays bright magenta-pink through the middle. Browsers fall back to sRGB if the interpolation keyword is unsupported, so it's safe to opt in unconditionally.

When to reach for each gradient type

Linear is the default — use it for hero backgrounds, button highlights, dividers, and any directional flow. Radial shines for spotlights, glows, and vignettes; layer multiple radials at different positions to fake a mesh gradient. Conic is underused but powerful: pie/donut charts, color pickers, loading rings, and any visual element that wraps around a center point. A conic gradient with hard stops at percentage positions renders a complete pie chart in a single CSS line.

Performance and accessibility

Gradients are GPU-accelerated and effectively free. The concerns are accessibility: text contrast against a gradient must be computed at the worst-case point, and motion (e.g. animating a conic angle) needs to respect prefers-reduced-motion. The generator emits static CSS, so you can layer your own motion rules on top with appropriate media queries. For palette work that feeds gradients, the palette generator is the natural upstream tool.

CSS Gradient Generator