CSS Gradient Generator

Build a gradient and copy the CSS behind it.

FREE - NO SIGN-UP - RUNS ON YOUR DEVICE

Runs in your browser tab

  • 2gradient types
  • CSSready to paste
  • Livepreview
  • 0uploads
Specification

CSS Gradient Generator at a glance

Input
Type, angle and two or more stops
Output
A preview and copy-ready CSS
Types
Linear and radial
Where the preview comes from
The browser drawing your CSS
Price
Free
Account required
None
Where processing happens
On your device
How to

How to use CSS Gradient Generator

  1. 1

    Pick the type

    Pick linear or radial.

  2. 2

    Set the color stops

    Set the color stops.

  3. 3

    Copy the CSS

    Copy the CSS.

Questions

Frequently asked questions

How many color stops can I add?

As many as the blend needs. Two make the simplest gradient, and each extra stop gives the browser another point to blend through.

Will the preview match my page?

It is the browser drawing the same CSS you copy, so it matches wherever that rule lands on an element of the same size.

Can I export the gradient as an image?

No. This panel gives you CSS. Anything that needs a file rather than a style rule has to be produced somewhere else.

Is my gradient sent anywhere?

No. It is assembled inside this browser tab, with nothing uploaded and nothing kept in an account.

Background

Gradients that hold up

Choose linear or radial, set the angle, and add as many color stops as the design needs. The preview is the CSS itself, so what you see is what you copy.

  • Two stops close in lightness blend smoothly; two far apart can show a visible band.
  • Text over a gradient meets a different background at each end, so check the lightest and darkest points.
  • The angle changes a linear gradient most, so set it before fine-tuning the colors.
  • Paste the rule where the element's background lives, and give that element a size to fill.

Full specification

Specification of the CSS Gradient Generator tool
InputA gradient type, an angle, and two or more color stops.
OutputA live preview and the CSS that draws it, ready to copy.
TypesLinear and radial, both assembled as native CSS gradients.
Where the preview comes fromThe browser rendering the same CSS you copy.
PriceFree. Supported by clearly labelled ads outside the working area.
Account requiredNo.
Where processing happensIn your browser tab. Your input is never uploaded.
Next step

Keep going with the same files

All color tools: Color tools on SPOTTOOLS