Gradient Generator
Design beautiful CSS gradients with live preview
Gradient type
Color stops
Presets
CSS
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
Tailwind (arbitrary value)
bg-[linear-gradient(135deg,_#8B5CF6_0%,_#EC4899_100%)]
Export as image
Quick steps
Pick a starting point
Choose a preset for inspiration or click Random to roll the dice.
Tweak the stops
Drag the position slider, pick a color, add or remove stops up to 8.
Copy or export
Copy the CSS, Tailwind arbitrary class, or save the gradient as a PNG at any size.
Frequently asked questions
What gradient types are supported?
Linear and radial. Linear takes an angle (0° points up, increases clockwise). Radial supports ellipse and circle, both centered.
What is the Tailwind output?
An arbitrary value class: bg-[linear-gradient(...)]. Underscores stand in for spaces (Tailwind requires this). Paste it as a className.
Why does my PNG export look slightly different from the CSS preview?
CSS gradient rendering is platform-defined; our PNG export uses the Canvas API. Both follow the spec, but slight differences in interpolation can occur at very steep color transitions.
Is my data uploaded anywhere?
No. Gradient generation and PNG export both happen in your browser.