CSS Gradient Generator

Build linear or radial gradients and copy the CSS.

FREE - NO SIGN-UP - RUNS ON YOUR DEVICE

Runs locally in your browser

  • Liveresult
  • 0uploads
  • 1 tapto copy
  • Freeno account
In practice

What you can count on

  • 0uploads
    • Your input stays on this device
    • Nothing is sent for processing
  • Liveoutput
    • Results update in the working area
    • Change inputs and compare instantly
  • 1 tapto copy
    • Copy the result
    • No account or install needed
Specification

CSS Gradient Generator at a glance

Input
A type, an angle and two or more stops
Output
A live preview and copy-ready CSS
Method
Native CSS, assembled in the browser
Stops and shape
Position slider per stop, min two
Price
Free
Where processing happens
On your device
How to

How to use CSS Gradient Generator

  1. 1

    Choose type and angle

    Pick linear or radial, then set the angle for the direction you want.

  2. 2

    Place the color stops

    Give each stop a color and a position, adding or removing stops. The band above redraws with every change.

  3. 3

    Copy the CSS

    The Result is a finished background line. Copy result puts it on your clipboard, ready to paste into a stylesheet.

Questions

Frequently asked questions

Does this work without uploading anything?

Yes. The tool processes your input inside the browser tab. Nothing is sent to a processing server or stored in an account.

Can I change the result before copying it?

Yes. Adjust any available control and the result updates. Copy it only when the output matches what you need.

Which browsers are supported?

Current versions of Chrome, Edge, Firefox and Safari support the browser features used here. Very old browsers may lack a required API.

Background

Getting a blend without the gray middle

Two colors far apart on the wheel pass through gray where they meet. A third stop in a hue between them keeps the middle of the blend saturated.

  • Angles run clockwise from the top: 0deg is bottom to top, 90deg is left to right, 135deg is the diagonal.
  • A radial gradient ignores the angle. Move the stop positions instead to change where the colors meet.

Full specification

Specification of the CSS Gradient Generator tool
InputGradient type, angle and two or more color stops.
OutputA live gradient preview and copy-ready CSS.
MethodNative CSS gradients assembled directly in the browser.
Stops and shapeEvery stop has its own 0 to 100 percent slider and can be removed, down to two. Choosing radial hides the angle field.
PriceFree. Supported by clearly labeled ads outside the working area.
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