CSS Gradient Generator
Build gradients visually: drag colour stops on the bar, set per-stop alpha, choose the angle or the radial shape, size and centre, stack multiple layers, and pick an interpolation space such as oklch for vivid blends. Import an existing CSS gradient (or a whole background list), undo and redo, and copy the result as CSS with a solid fallback, Tailwind v3 and v4 classes, or a downloadable SVG.
background: #a857c5; /* fallback */ background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Related tools
Box Shadow Generator
Design box-shadow, text-shadow and drop-shadow() with layers, presets and a light/dark preview.
Color Palette Generator
Build accessible palettes from a seed colour or an image, with Tailwind and token exports.
Color Converter
Convert any CSS colour between HEX, RGB, HSL, HWB, LAB, LCH, OKLCH and P3, with contrast checks and ramps.
HEX to RGB
Convert HEX colour codes to RGB and back with sliders, a picker and Tailwind snippets.
How to use CSS Gradient Generator
- 1Pick linear, radial or conic and start from a preset or import your own CSS.
- 2Drag the stop handles (double-click the bar to add one) and edit colours, alpha and positions.
- 3Add layers for stacked effects and choose an interpolation space.
- 4Copy the CSS, the Tailwind classes or download the SVG.
About CSS Gradient Generator
Build gradients visually: drag colour stops on the bar, set per-stop alpha, choose the angle or the radial shape, size and centre, stack multiple layers, and pick an interpolation space such as oklch for vivid blends. Import an existing CSS gradient (or a whole background list), undo and redo, and copy the result as CSS with a solid fallback, Tailwind v3 and v4 classes, or a downloadable SVG.
CSS Gradient Generator is part of FizzKit — a collection of focused developer and ad-tech tools. Because everything runs locally, it works offline once loaded and never exposes your data to a remote server.