CSS Gradient Generator
Design smooth gradients visually and copy the CSS — without muddy grey in the middle.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to make a CSS gradient
- Choose linear, radial or conic and set the angle or centre.
- Click the bar to add colours, drag to position them, and pick colours.
- Copy the CSS, Tailwind or SVG — or download a PNG.
About Gradient Generator
Design linear, radial and conic CSS gradients visually.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Website heroes and backgrounds
- Buttons, cards and text effects
- Wallpapers and social graphics
Tip: Pick a preset as a starting point, then tweak its colours.
Frequently asked questions
Why does my gradient look grey in the middle?
Blending two opposite colours in sRGB passes through grey. Choose “OKLab — no grey middle” or OKLCH — the tool writes the modern CSS (linear-gradient(in oklab …)) plus a fallback for older browsers.
How do I add or move colours?
Click the gradient bar to add a colour, drag the handles to move them, select one to change its colour, opacity or position, and press Delete stop to remove it.
Can I download the gradient as an image?
Yes — as a PNG at 1920 × 1080, 4K, square, story or banner size, or as an SVG file.
Does it make Tailwind classes?
Yes — simple gradients become bg-gradient-to-* with from/via/to classes; others an arbitrary bg-[…] value.
Do conic gradients work in every browser?
Yes — current versions of Chrome, Edge, Firefox and Safari all support linear, radial and conic gradients.