CSS Gradient Generator
Create linear CSS gradients from two colors and an angle, with a live preview and copy-ready CSS code.
How to use
Pick a preset or build from scratch: add color stops, drag positions, switch linear / radial / conic. Copy CSS or the Tailwind class snippet.
FAQ
What gradient types are supported?
Linear (any angle), radial (circle from the center) and conic (color wheel). Each supports multiple color stops with draggable positions.
How do I use the CSS?
Copy the generated background line into your stylesheet, or paste it into a Tailwind arbitrary value like bg-[linear-gradient(...)].
Can I start from a preset?
Yes — click any of the 12 presets (sunset, ocean, radial spotlight, conic rainbow and more), then tweak stops and angles.
Last updated: