CSS gradient and shadow

Build a CSS gradient or a box shadow with sliders, see it live and copy the CSS.

Processed on your device, never uploaded

Gradient

Type

Angle135°

Colours

Colour 1

Position 10%

Colour 2

Position 2100%

Preview and CSS

background: linear-gradient(135deg, #2F5F8F 0%, #7FB2E5 100%);

A CSS gradient, ready to paste.

Processed on your device, never uploaded

What it does

Make a linear, radial or conic gradient with up to four colours, or a box shadow with offset, blur, spread, colour and opacity. The preview updates as you move the sliders.

How to use it

1Pick Gradient or Shadow.
2Move the sliders and set the colours.
3Copy the CSS.

Questions

Which colour formats work?

HEX, rgb(), hsl() and CSS colour names.

Does it work in every browser?

Yes. Linear, radial and conic gradients and box-shadow are supported in all current browsers.

Is anything uploaded?

No. It runs on your device.