toolspace

CSS gradient generator

Design linear, radial and conic CSS gradients visually. Add color stops, drag positions, set the angle and copy the CSS. Works in every modern browser.

Loading…

Worked example

A left-to-right sunset fade: two stops, 90 degrees.

settings
Type: linear
Angle: 90°
Stops: #ff7e5f at 0%, #feb47b at 100%
css
background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

Common mistakes

  • Using background-color

    A gradient is an image, so background-color ignores it. Use background or background-image.

  • Getting the angle backwards

    0deg runs bottom to top and 90deg left to right; angles turn clockwise. "to right" is the same as 90deg.

  • Expecting a hard edge

    Colors blend between stops. For a sharp line, give two stops the same position: red 50%, blue 50%.

  • Oval radial gradients

    radial-gradient is an ellipse that follows the box shape unless you say circle.

How it works

  1. 1

    Choose the type

    Linear runs along an angle, radial spreads from the center, conic sweeps around it.

  2. 2

    Edit the stops

    Pick each color and its position; add or remove stops as you need.

  3. 3

    Copy the CSS

    A ready background property, previewed full size above.

Questions

Do CSS gradients need vendor prefixes?
No. linear-gradient, radial-gradient and conic-gradient work unprefixed in every current browser.
How do I make a hard color stop?
Give two stops the same position, such as red 50% and blue 50%, and the colors meet with a sharp edge instead of blending.
Is the gradient an image?
No, it is pure CSS, so it is sharp at any size and costs nothing to download.