How do I generate a clean CSS gradient for a website?
CSS gradient generator - linear, radial, conic - with optional OKLCH interpolation (perceptually uniform) instead of sRGB.
Key win: OKLCH-blended gradients avoid the muddy gray mid-point common in sRGB - blue→yellow in sRGB passes through muddy gray, in OKLCH it passes through clean cyan/green.
Pick the type, set stops and angle - get ready CSS and Tailwind code. All local.
How to use it
- Pick a type: Linear (line), Radial (from center), Conic (around an angle, like a clock face). Linear and Conic have a 0-360° angle slider.
- Each stop has: color (HEX, native picker), position 0-100%, X to remove. Click "Add stop" - generator inserts a new one in the largest gap. Max 8 stops.
- Pick interpolation: sRGB (classic, sometimes muddy mid-points) or OKLCH (perceptual, cleaner). Leave OKLCH for production work.
- CSS and Tailwind regenerate live. Click "Copy" to grab the snippet.
- Six presets at the bottom (Sunset, Ocean, Forest, Aurora, Ice, Mono) for a quick start.
When this is useful
Where the gradient generator earns its keep - typical placements:
- Hero sections - every landing page needs a striking gradient.
- Brand - a gradient from two brand colors = consistent style.
- App backgrounds - a subtle gradient makes plain UI feel premium.
- Buttons - a subtle radial on hover adds life.
- Cards - conic gradient as a "shimmer" (loading state).
- Email templates - HTML email supports gradients since 2020.
- Designers migrating to OKLCH - compare sRGB vs OKLCH side-by-side and see the difference on complementary-color gradients (blue→yellow, red→green show the gap most).
Questions and answers
Because browsers natively interpolate between stops in sRGB. To get a perceptual OKLCH effect we insert ~10 intermediate stops per segment - the browser linearly interpolates between them and the result is practically identical to true OKLCH interpolation. CSS Color Level 4 has a native "in oklch" syntax but support is still limited (Chrome 113+, Safari 16.4+, Firefox 113+).