Build linear, radial, and conic gradients with unlimited stops, OKLCH-aware interpolation, and Tailwind v4 utility output. Live preview, 30+ presets, in your browser.
Linear blends along a straight line at a chosen angle (0° = upward, 90° = rightward). Radial blends from a center point outward — circle or ellipse, with size keywords like farthest-corner. Conic rotates around a center point — colour stops sit at angles like clock hands. Conic is great for pie charts, dial readouts, and synthetic color-wheel backgrounds.
When transitioning between hues that aren't analogous — e.g. blue → yellow, or red → green. The default sRGB interpolation passes through a muddy grey midpoint; OKLCH (CSS Color Module 4 in oklch) keeps the midpoint vivid because it interpolates in a perceptually uniform space. For two-stop gradients between similar hues, the difference is small. For multi-stop or wide-hue-range gradients, OKLCH is dramatically better.
Linear / radial / conic, OKLCH-smooth, Tailwind-aware — and a few small touches that make it actually fun to use.
Linear with angle 0-360°, radial with circle/ellipse + size + position, conic with from-angle + position. All emit standards-compliant CSS Images Module Level 4 syntax.
Add stops at any percent, drag the position slider to fine-tune, click the swatch to pick a colour or paste a HEX. Stops auto-sort on output. Click the × to remove (minimum 2 stops).
Switch between default sRGB and modern in oklch interpolation. OKLCH gives perceptually smoother midpoints — no muddy grey bands across hue jumps. Falls back gracefully on browsers that haven't shipped CSS Color 4.
Three output panes update live: raw CSS (background-image: linear-gradient(...)), Tailwind v4 arbitrary-value utility (bg-[linear-gradient(...)]), and a JSON design-token snippet ready for Style Dictionary or Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — click to load and tweak. Each preset is a real production-quality starting point, not just a name.
Preview rendered with native background-image so what you see is exactly what your stylesheet produces. Every pixel runs locally — open DevTools → Network and verify zero outbound requests.
Four steps from blank slate to production-ready CSS, Tailwind, or JSON.
Linear for backgrounds, headers, hero sections. Radial for spotlights, vignettes, glowy buttons. Conic for pie charts, colour wheels, and trendy synthetic backgrounds. Switch between them with the tabs — your color stops are kept across the switch.
Click the colour swatch to open a picker, or paste a HEX directly into the field. Drag the slider to set the stop's position 0-100%. Click + Add stop to insert a new stop at the largest gap (with a midpoint colour). Up to 12 stops total.
For linear, set the angle (0° points up, 90° right). For radial, pick shape, size keyword, and centre position. For conic, set the starting angle. Switch Color interpolation to OKLCH for perceptually smooth midpoints across multi-hue gradients.
Three panes update live: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (design-token shape). Use the copy icon on each, or hit Download CSS to save a gradient.css file ready to drop into a project.
Four common scenarios where a privacy-first browser tool beats opening Figma + a separate gradient site.
Pick a preset close to your brand, drop your two brand colours into the stops, switch to OKLCH interpolation for a clean midpoint. Copy the CSS, paste into your hero's stylesheet. Total time: under 2 minutes.
Build a 3-stop brand gradient once, copy as a JSON design token, drop into Style Dictionary / Figma Tokens. Now every button + card on every platform uses the same gradient by reference. Update in one place, propagates everywhere.
Synthetic conic gradients are perfect for pie-chart visuals, progress dials, or 'data-loading' shimmer states. Pick the conic type, set the from-angle, drop in stops at the right percentages — the math matches angles 0-360° to percent positions exactly.
Build the gradient, set the aspect ratio to match your target (16:9 for slides, 1:1 for IG, 3:1 for X header), screenshot the preview. Or copy the CSS into a one-off HTML file and screenshot in your browser at the exact pixel size you need.
Your colours and gradients never leave your device. Open DevTools → Network and you'll see zero outbound requests during any operation.
background-image — so the rendered gradient matches exactly what your stylesheet will produce in your users' browsers.
Hand-picked reads on CSS gradients, OKLCH interpolation, and design-token systems.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear blends along a straight line at a chosen angle (0° = upward, 90° = rightward). Radial blends from a center point outward — circle or ellipse, with size keywords like farthest-corner. Conic rotates around a center point — colour stops sit at angles like clock hands. Conic is great for pie charts, dial readouts, and synthetic color-wheel backgrounds.
When transitioning between hues that aren't analogous — e.g. blue → yellow, or red → green. The default sRGB interpolation passes through a muddy grey midpoint; OKLCH (CSS Color Module 4 in oklch) keeps the midpoint vivid because it interpolates in a perceptually uniform space. For two-stop gradients between similar hues, the difference is small. For multi-stop or wide-hue-range gradients, OKLCH is dramatically better.
An arbitrary-value utility you can paste straight into JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. No tailwind.config.js changes needed; works on any Tailwind 4 project. If you prefer named colour tokens, copy the CSS instead and convert by hand.
Linear and radial gradients have been universally supported since 2014. Conic gradients shipped in all evergreen browsers by 2021. The in oklch interpolation keyword is supported in Chrome 111+, Safari 16.2+, Firefox 113+. If you need to support older browsers, use the default sRGB interpolation — the visual difference matters most for hue-jumping multi-stop gradients.
No. Gradient string generation, CSS / Tailwind / JSON serialisation, and the live preview all run in JavaScript on your device. Open DevTools → Network and you'll see zero outbound requests during any operation. Paste brand colours, internal tokens — nothing leaves your laptop.