CSS Gradient Generator — linear & radial, free

Build a linear or radial CSS gradient with unlimited colour stops and a live preview, then copy production-ready CSS. Free, instant, no sign-up needed.

Type

Angle · 135°

From

To

How it works

1

Enter a color

Type a HEX, RGB or HSL value, or pick one from the swatch.

2

See every format

All the equivalent notations update together, ready to paste into CSS.

3

Copy what you need

Click any value to copy it.

Related tools

Color picker from imageLoad a photo or screenshot and lift the exact HEX, RGB and HSL value of any pixel, with a zoomed preview. Free — the image is never uploaded anywhere.Color converterEnter a colour in any notation and get HEX, RGB, HSL, HSV and CMYK back, ready to paste into CSS or a design tool. Free, instant and fully browser-side.