CSS gradient generator
GeneratorsNo. 27 / 84
Design a CSS gradient with a live preview, then copy the exact background rule. Linear, radial or conic, with as many stops as you need.
a sunset in a div, minus the sand.
work surface
Math, not advice — results are indicative.Read the disclaimer.
most-used utilities
A hero background
Two stops, 90 degrees, and colors that stay quiet enough for text.
A button hover
A short linear gradient at 135 degrees, two close colors, no drama.
A glow
Switch to radial and put the bright color at the center.
pro tips
Two stops is usually enough. If you need four, make sure each one earns its place.
Hard edges come from two stops at the same position, not from a third color.
For text overlays, keep the gradient subtle and check contrast at both ends.
what it does
A CSS gradient is a background image made from color stops. Pick a type, choose the colors and their positions, and the page writes the exact background rule for you. No Photoshop, no guessing at syntax.
Linear gradients run along an angle, radial gradients spread from a center point, and conic gradients sweep around it. Most interface work uses linear; radial is good for glows and spotlights; conic is the one behind pie-chart effects and color wheels.
The stops are the interesting part. Two colors at 0% and 100% is the classic fade; three or four stops let you create bands, hard edges and more deliberate transitions. Move a stop closer to its neighbor and the change gets sharper.
The preview updates as you edit, and the code box always contains the final rule. Copy it straight into a stylesheet or an inline style. The random button is useful for breaking out of the same blue-to-purple gradient everyone defaults to.
quick answers
Does this work with Tailwind or plain CSS?
The output is a standard CSS background rule, so it works anywhere CSS does. Paste it into a stylesheet, a style attribute or a custom property.
What is a conic gradient?
A gradient that sweeps around a center point instead of running in a straight line. It is how you build color wheels and pie-chart looks.
Can I animate the gradient?
Yes, but animate the custom properties or the background position rather than the gradient string itself; browsers cannot interpolate between two different gradient definitions.