TooldenTOOLDENDEVELOPERON-DEVICE
CSS Gradient Generator: Linear, Radial, Conic
Design linear, radial and conic CSS gradients with a live preview. All processing happens in your browser.
linear · 2 stops · 90°
HOW TO USE
- 1Pick a gradient type — linear, radial or conic — and adjust the angle (linear and conic only).
- 2Add, remove or edit color stops: use the swatch to pick a color or type a value in HEX, RGB, HSL or OKLCH.
- 3Turn on Custom positions to set exactly where each color starts and ends along the gradient.
- 4Tap a preset for an instant palette, or Random for a fresh harmonized combination.
- 5Copy the CSS declaration or the Tailwind class with the buttons on the preview.
EXAMPLE
INPUT
Linear · 90° · #ff9933, #ffffff 50%, #138808
OUTPUT
background: linear-gradient(90deg, #ff9933, #ffffff 50%, #138808); — white is pinned at the halfway point
FAQ
Does the gradient generator upload my colors?
No. Everything runs locally in your browser — nothing is sent to a server.
Can I use the output with Tailwind CSS?
Yes. Copy the generated Tailwind class with the TW button on the preview, or grab the raw CSS for any other project.
Can I use more than two colors?
Yes — add up to as many stops as you like with the Add color button. Remove works down to two.
What do the color formats do?
The format switcher changes how each stop is displayed and exported: hex (#667eea), rgb(...), hsl(...) or oklch(...). Pick whichever matches your stylesheet.
What does Custom positions do?
It lets you set the percentage position of every color stop, so you can control where each color starts and ends — including hard edges for striped looks.
How does Random work?
It picks a random gradient type plus a harmonized palette built from classic color schemes (analogous, complementary, triadic and more), so results always look intentional.