Build CSS linear and radial gradients with a live preview. Add color stops, set the angle, and copy the ready-to-use background declaration instantly.
Runs entirely in your browser — your data never leaves your device.
How to use CSS Gradient Generator
What it does & when you need it
A CSS gradient is a background that blends between colors, and writing one by
hand means guessing angles and percentages until it looks right. This tool lets
you add color stops, drag their positions, spin the angle, and switch between
linear and radial while a live panel shows the result. When it looks right, copy
the background: declaration. It all runs in your browser — your palette never
leaves the page.
Use it for hero sections, buttons, card backgrounds, image overlays, or anywhere
a flat fill feels lifeless.
How to use
Choose Linear or Radial. Linear blends along a line; radial blends
outward from the center and ignores the angle.
For a linear gradient, set the Angle — 90° runs left-to-right, 180°
runs top-to-bottom.
Edit each color stop: pick a color and drag its position from 0% to 100%.
Use + Add stop for more colors, or remove one (a minimum of two is
required).
Copy the declaration, or press Ctrl/Cmd + Enter.
Things worth knowing
The angle is a compass, measured clockwise from up.0deg points the
gradient upward, so the first color sits at the bottom; 90deg points right.
Values outside 0–359 wrap, so 450deg behaves exactly like 90deg. Radial
gradients have no direction, which is why the angle control switches off.
Stops are colors pinned to positions. Two stops give a simple fade; a third
adds a midpoint color. Placing two stops at the same percentage creates a hard
edge instead of a blend — the trick behind stripes and two-tone splits. Every
color is a normal CSS color, so an rgba() stop fading to transparent makes a
clean overlay for text on images. Grab exact values from the
color converter.
A gradient is a background image, not a color. That means you can layer it
with a box shadow for depth, and run the final
rule through the CSS formatter to keep your stylesheet
tidy.
Examples
Two-color linear
linear 90deg #ffffff 0% #000000 100%
A left-to-right fade from white to black — the simplest two-stop linear gradient.
Three-stop rainbow slice
linear 45deg #ff0000 0% #00ff00 50% #0000ff 100%
A diagonal blend through red, green, and blue using three evenly spaced color stops.
Radial spotlight
radial #ffffff 0% #3b82f6 100%
A radial gradient blends outward from the center; the angle is ignored for this type.
Frequently asked questions
What is the difference between a linear and a radial gradient?+
A linear-gradient blends colors along a straight line whose direction you set with an angle, so 90deg runs left-to-right and 180deg runs top-to-bottom. A radial-gradient blends outward from a center point in rings, so the angle does not apply — this tool disables the angle control when you switch to radial.
How does the angle work in a linear gradient?+
The angle is the direction the gradient travels, measured clockwise from pointing up. 0deg goes bottom-to-top, 90deg goes left-to-right, and 180deg goes top-to-bottom. Values outside 0–359 wrap around, so 450deg is the same as 90deg and -90deg is the same as 270deg.
What are color stops and how many can I use?+
A color stop is a color paired with a position from 0% to 100% along the gradient. You need at least two, but you can add more for multi-color blends — three stops give you a middle color, and placing two stops at the same position creates a hard line instead of a smooth blend.
Can I make a gradient with transparency?+
Yes. Use a color with alpha, such as rgba(255,0,0,0.5) or an 8-digit hex, for any stop. Fading a color to transparent is a common trick for image overlays — a stop of transparent at 100% lets the background show through the bottom of the gradient.
Is the gradient generated on a server?+
No. The background declaration is built in your browser as you edit stops and the angle, with no network request, so it updates instantly, works offline, and never uploads your palette.