/

CSS Gradient Generator

Processed Client Side

Visually build linear, radial, and conic gradients with unlimited color stops. Tune the angle or position, then copy the CSS.

Gradient options
Angle90°
Color stops
0%
100%
Preview & CSS
linear
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Bookmark this tool now — skip the search next time you need it.

About CSS Gradient Generator

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

Build CSS gradients visually and copy the finished declaration. Choose linear, radial, or conic, add as many colour stops as you need, drag each one to the position you want, and set the angle or the centre point — the preview updates live and the CSS is generated as you go. Writing gradient syntax by hand is fiddly precisely because you cannot see what you are typing; here the preview is the source of truth and the CSS follows. The output is a plain background declaration using standard modern syntax, ready to paste into a stylesheet, a styled-component, or a Tailwind arbitrary value.

Key features

  • Three gradient types: linear, radial, and conic
  • Unlimited colour stops — add, remove, recolour, and reposition each one
  • Angle control for linear and conic gradients, in degrees
  • Radial shape choice of circle or ellipse, with an adjustable centre position
  • Centre position controls on both axes for radial and conic gradients
  • Live full-size preview that updates with every change
  • Randomise button for generating a starting point when you do not have one in mind
  • Clean, copy-ready CSS using standard modern gradient syntax — no vendor prefixes needed
  • Runs entirely in your browser

How to use it

  1. Pick the gradient type: linear, radial, or conic.
  2. Set the angle for a linear or conic gradient, or the shape and centre point for a radial one.
  3. Add colour stops and drag them into position; click a swatch to change its colour.
  4. Watch the live preview until it looks right.
  5. Copy the generated CSS and paste it into your stylesheet.

Tips & common mistakes

  • In CSS, 0deg on a linear gradient points upward and angles increase clockwise — 90deg runs left to right. It is the opposite of the convention used in most design tools.
  • Two stops of a similar hue read as a subtle surface; two distant hues read as a statement. For backgrounds behind text, keep the stops close together so contrast stays predictable.
  • Conic gradients are the trick for pie charts, colour wheels, and progress rings without any SVG or canvas.
  • Blending between two saturated complementary colours passes through a muddy grey in the middle. Add a third stop in a related hue to steer the transition.
  • Gradients are backgrounds, not colours: to apply one to text, pair it with background-clip: text and a transparent text colour.
  • Check any gradient sitting behind text with the Colour Contrast Checker at both ends — a gradient that passes at one stop can easily fail at the other.
  • Standard gradient syntax needs no vendor prefixes in any browser still in support, so the output here can be pasted as-is.
  • Paste the generated CSS into the CSS Beautifier / Minifier if you want it reformatted or minified for production.
  • Styling the same element’s shadow too? Build it visually with the Box Shadow Generator.

Related tools

Browse all 19 Frontend / CSS tools

Frequently asked questions

9

Pick a gradient type (linear, radial, or conic), add color stops with the "Add stop" button, and set each color and position. The CSS updates live — click Copy to grab the background declaration.

A linear gradient blends colors along a straight line at a chosen angle, radial blends outward from a center point, and conic sweeps colors around a center like a pie chart. This tool generates all three.

Yes — add as many color stops as you want. Each stop has its own color and position percentage, so you can build multi-color and hard-banded gradients.

Use the Angle slider. 0° goes bottom-to-top, 90° left-to-right, 180° top-to-bottom, and so on. For conic gradients the same slider sets the start angle.

Upward, with angles increasing clockwise, so 90deg runs left to right. This is the opposite of the convention used in most design tools, which is the usual reason a gradient comes out rotated.

Blending between two saturated complementary colours passes through grey at the midpoint. Add a third stop in a related hue to steer the transition away from it.

A gradient is a background, not a colour. Set it as the background, then add background-clip: text with a transparent text colour so the background shows through the letterforms.

No. Standard gradient syntax is supported without prefixes by every browser still in support, so the output can be pasted straight into your stylesheet.

Only if it passes contrast at every point. Check both ends of the gradient with the Colour Contrast Checker, because a gradient that passes at one stop can easily fail at the other.