CSS Gradient Generator
Create CSS gradients visually.
Overview
The CSS Gradient Generator builds linear, radial and conic CSS gradients visually. Drag colour stops along the gradient bar, set the angle or radial shape, choose an interpolation space (sRGB, linear RGB, OKLCH), and copy the generated background declaration ready to paste into your stylesheet.
It is aimed at front-end developers prototyping hero sections, designers experimenting with mesh-style backgrounds, and anyone tired of hand-editing percentage stops in a text editor. The live preview updates as you drag, so you can iterate on a hero banner or button background without leaving the page.
How it works
The output is plain CSS using the modern gradient syntax: linear-gradient(angle, c1 stop1, c2 stop2), with optional in oklch, in srgb, in srgb-linear or in hsl interpolation hints. Choosing OKLCH writes linear-gradient(in oklch, ...), which lets the browser do perceptually uniform interpolation natively.
Colour stops can be positioned by percentage or by absolute length, and intermediate hint stops can be added to push the midpoint earlier or later along the bar. The tool also offers conic gradients (centred at any offset) and radial gradients with explicit shape and size keywords.
Examples
linear-gradient(135deg, #ff6600 0%, #cc0066 100%)
linear-gradient(in oklch, #3366ff 0%, #ff66cc 100%)
radial-gradient(circle at 30% 30%, #ffffff 0%, #6699cc 100%)
conic-gradient(from 45deg at 50% 50%, #ff0000, #ffff00, #00ff00, #ff0000)
FAQ
Why do my sRGB gradients have a muddy band in the middle?
Naive sRGB interpolation passes through a darker, lower-saturation mid-tone because the gamma curve makes equal numeric steps unequal in perceived brightness. Switching the interpolation to OKLCH or linear RGB removes the dip.
Is in oklch supported everywhere?
Modern Chrome, Edge, Firefox and Safari support it. For older browsers, fall back to the same gradient without the in oklch clause — they will still render, just with the muddier interpolation.
What is a hint stop?
A hint is a single percentage written between two colour stops that controls where the midpoint sits. linear-gradient(red 0%, 75%, blue 100%) pushes the perceptual halfway point to 75%.
How do I make a smooth multi-stop gradient?
Place stops at roughly equal positions and use OKLCH interpolation. Avoid placing two saturated complementary colours next to each other unless you want the desaturated band that appears between them.
Can I export the gradient as an image?
The generator focuses on CSS output. For PNG export use a screenshot at a defined viewport size; CSS-rendered gradients always scale with the element they are applied to.