Find Color Codes

CSS Gradient Generator

Build a gradient and copy the CSS.

Three steps

How to use it

  1. 1

    Set your color stops

    Start with two and add more as needed. Each stop has a color and a position along the gradient.

  2. 2

    Choose type and angle

    Linear with an angle, or radial from a center point. 90deg runs left to right; 180deg runs top to bottom.

  3. 3

    Copy the CSS

    The output is a complete declaration. Nothing needs prefixing. Unprefixed gradient syntax has been supported everywhere for years.

About this tool

CSS gradients are images, not colors, which explains most of the confusion around them: they belong in background-image, not background-color, and an element needs a fallback color underneath for the moment before they paint.

The default interpolation is in sRGB, and between two saturated stops of different hue that produces a dull band through the middle. The same averaging effect the mixer shows. Adding a third stop at the midpoint, set to the vivid color you actually want there, fixes it in one line.