Free Tool
CSS Gradient Generator
Add color stops, set the angle or shape, and copy the CSS — no install, no sign-up, everything runs in your browser.
Type
Color stops
Presets
Generated CSS
How CSS gradients work
linear-gradient() and radial-gradient() both take a list of comma-separated color stops and paint a smooth transition between them.
- Angle: for linear gradients, controls the direction the colors flow — 0deg points up, 90deg points right.
- Color stops: each stop is a color plus an optional percentage marking where it reaches full strength along the line.
- Radial: paints stops outward from the center in a circle instead of along a straight line — good for spotlight or vignette effects.
Drop the generated value straight into a background or background-image property — gradients work anywhere a normal background image would.
Copying gradients off a live site instead?
UICuts' element inspector grabs the exact background, colors, and every other computed style straight from any page — then hands it to your AI coding tool.
Get Started Free