BrowserTools

CSS Gradient Generator

Linear & radial gradients with live preview

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-08-28
Free Private No uploads
What is CSS Gradient Generator?

A preview bar across the top, controls underneath, and a single CSS declaration at the bottom ready to copy. Linear or radial is a two-button switch, and the angle slider runs from 0 to 360 degrees but appears only for linear, because a radial gradient has no direction to dial. Colour stops are individual rows, each with a swatch, a text field that takes any CSS colour notation, and a slider setting its position as a percentage. Between two and five stops can be held at once, and the declaration is assembled with the stops sorted by position, so the emitted function is always in ascending order regardless of the order you dragged them into. A Random button rolls two related hues and a fresh angle for a starting palette, and the output is a background value rather than a whole rule.

Design linear and radial CSS gradients visually — add and recolor stops, adjust angle and position — then copy production-ready CSS. Dark-mode friendly preview included.

Private CSS Gradient Generator In Your Browser

CSS Gradient Generator is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use CSS Gradient Generator

1

Choose Linear or Radial; the Angle slider is only shown for a linear gradient.

2

Edit each color stop row — pick a colour with the swatch, type any CSS colour notation into the field, drag the slider to set the position percentage.

3

Add more stops with + Add stop, which inserts one at half the last stop's position, or remove a row with its × button down to a minimum of two.

4

Press the copy button beside CSS output to take a declaration such as background: linear-gradient(135deg, #0d9488 0%, #4ade80 100%);

Key Capabilities
  • Stops are sorted by position before the gradient function is written, so the CSS always reads in ascending order.
  • Two to five stops can be held, and a new one is inserted at half the last stop's position instead of being appended at 100%.
  • Any CSS colour notation is accepted in the text field, including the hsl() values the Random button produces, not only hex from the swatch.
  • Random picks two hues between 60 and 180 degrees apart at 65 to 90 percent saturation, giving a related pair rather than clashing colour.
Common Use Cases
  • A front-end developer builds a hero banner fill by eye and copies the declaration instead of hand-writing the stop list.
  • A designer exports two hex values from a palette tool, drops them into two rows and dials the angle to the intended direction.
  • Someone prototyping a hover state needs a third mid-point colour and adds a stop at the halfway slider position.
Clear Answers

Frequently Asked Questions

What do the angle numbers mean?
Zero degrees points up and the value turns clockwise, so 90 is to the right, 180 straight down and 135 the familiar diagonal towards the bottom right. Angles above 360 wrap around, which is why the slider stops at that value.
Why does my gradient look flat in an email client?
Many mail clients strip or ignore background images in CSS. Set an equivalent solid background-color as a fallback and let the gradient enhance it where it is supported, rather than relying on it for the whole design.
Can I copy the gradient as a whole CSS rule?
You get the background value only, such as background: linear-gradient(...);, because that is the part you paste into an existing declaration. Add the selector and the property name yourself, or replace the value of an existing background declaration.
How many stops is too many?
Two or three usually reads best. Past about four, adjacent colours blend into a band that is hard to control and easy to make muddy; a two-stop fill with a third accent used sparingly is a sturdier choice.