CSS gradient & shadow generator

Build gradients and box shadows while previewing them, then copy the CSS code.

Gradient

Type

Angle (0–360 degrees)

Angle slider

Color stop 1

Color (hex)

Pick a color

Position (%)

Color stop 2

Color (hex)

Pick a color

Position (%)

You can use 2 to 5 stops, and they are output sorted by position from lowest to highest.

Preview

Generated CSS

Box shadow

Shadow layer 1

X offset (px)

Y offset (px)

Blur (px)

Spread (px)

Color (hex)

Pick a color

Opacity (%)

Inner shadow (inset)

You can use up to 4 shadow layers.

Preview

Generated CSS

How to use the CSS gradient & shadow generator

The preview and CSS code update as soon as you change a value. When you like the result, press Copy CSS and paste it into your stylesheet.

Limits

Colors accept only hex in the #RGB, #RGBA, #RRGGBB or #RRGGBBAA form, and the leading # may be omitted.
Numbers out of range are set to the nearest allowed value. Angle is 0–360, position and opacity are 0–100, offsets and spread are -200 to 200, and blur is 0–200.
Numbers are used up to 2 decimal places.
Radial gradients are always circles spreading from the center.

Frequently asked questions

Is my input sent to a server?

No. Everything is calculated inside this browser, and your input and results are neither saved nor uploaded. Reloading returns to the starting values.

Does changing the stop order change the result?

The output CSS is always sorted from the lowest position. Stops at the same position keep the order you entered.

How is opacity applied?

If the shadow color has an alpha in an 8-digit hex, it is multiplied by the opacity (%) and output as rgba(). If it is not transparent, it is output as a 6-digit hex.