Build linear, radial, conic, and mesh CSS gradients with perceptually-uniform OKLCH color interpolation (CSS Color Level 4). Live preview, visual stop editor, and one-click Tailwind v4 export.
CSS output
How to Use CSS Gradient Generator in 3 Steps
Configure. Add color stops by clicking the gradient bar or editing the stop table. Drag stops to reposition, click swatches to change color with HEX/RGB/OKLCH input.
Process. Choose type (linear, radial, conic, mesh), angle/position, and interpolation color space (OKLCH recommended for perceptual uniformity, or sRGB for classic behavior).
Export. Copy the CSS, Tailwind v4 class, or SCSS mixin. Live preview updates in real time on a checkerboard background.
Why CSS Gradient Generator on Pixlane
CSS gradients are fundamental to modern UI — backgrounds, buttons, dividers, accents. Pixlane's generator uses OKLCH color interpolation (CSS Color Module Level 4, `in oklch` hint) so gradients look uniformly smooth to the human eye, unlike legacy sRGB-interpolated gradients that muddy in the middle. Supports linear, radial, conic, and layered mesh gradients.
OKLCH Interpolation — CSS Color Level 4 `in oklch` gradient hint produces perceptually uniform transitions — no muddy middles that plague legacy sRGB gradients.
4 Gradient Types — Linear, radial, conic (pie-chart style), and layered mesh gradients — the full modern CSS palette.
Visual Stop Editor — Drag-and-drop stops on the gradient bar. Click-to-add, click-to-delete. Live preview with checkerboard for transparency debugging.
Tailwind v4 Export — One-click export as Tailwind v4 utility with oklch variables, CSS custom properties, or SCSS mixin. Copy into your codebase.
Frequently Asked Questions
Why OKLCH for gradients?
When you interpolate colors in sRGB (the legacy default), the midpoint between two saturated hues becomes dull gray. OKLCH interpolates in a perceptually uniform space — the midpoint stays vivid and transitions look smoother. Modern browsers support `linear-gradient(in oklch, ...)` natively.
What is a mesh gradient?
A mesh gradient uses multiple layered radial gradients at different positions to create organic, multi-color backgrounds. Inspired by Figma and iOS 17 wallpapers — looks rich without requiring images.
Is the preview color-accurate?
The preview uses the same CSS you'll export. If your display supports Display-P3 (modern Macs, iPads, premium Android), wide-gamut OKLCH colors render richer. sRGB displays show their gamut-clamped equivalent.
Is this tool free?
Yes. CSS Gradient Generator on Pixlane is completely free with no signup required.