CSS Gradient Generator
Build smooth linear and radial CSS gradients with a live preview, multiple color stops and full angle control, then copy ready-to-use CSS. Everything runs in your browser — your data is never sent anywhere and nothing is stored.
How to use the CSS gradient generator
- Choose a gradient type — linear for a straight blend, radial for a circular glow.
- For linear gradients, drag the angle slider to set the direction.
- Pick a color and drag its position for each stop; use + Add color for more stops or × to remove one.
- Copy the generated CSS and paste it into your stylesheet.
Common angles: 0deg points up, 90deg points right, 180deg points down and 45deg runs diagonally. Positions let you control exactly where each color lands, from 0% to 100%.
More PAYATE tools
Frequently asked questions
What is a CSS gradient?
A CSS gradient is an image generated by the browser that transitions smoothly between two or more colors. You apply it with the background property using linear-gradient() or radial-gradient() — no image file is needed, so it scales perfectly and loads instantly.
What is the difference between linear and radial gradients?
A linear gradient blends colors along a straight line whose direction you set with an angle (for example 90deg goes left to right). A radial gradient blends colors outward from a center point in a circle or ellipse, like a spotlight or a glow.
What are color stops and positions?
A color stop is one color in the gradient plus an optional position from 0% to 100% that says where along the gradient that color sits. Two stops at 0% and 100% give an even blend; moving stops closer together makes a sharper transition.
Why is there a -webkit- line in the output?
The -webkit- prefixed line is a fallback for older versions of Safari and Chrome that shipped gradients before the syntax was standardized. Modern browsers use the unprefixed background line, but including both maximizes compatibility.
Is my data sent anywhere?
No. The gradient is built entirely in your browser — nothing is uploaded to a server and nothing is stored. You can copy the generated CSS and paste it straight into your stylesheet.
How do I use the generated CSS?
Copy the snippet and paste it into the rule for the element you want to style, for example .hero { background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); }. The gradient fills the element's background box.