Gradient & Box Shadow Generator

Design gradients and layered shadows with a live preview.

Start Color

End Color

Direction

Shadow Color

X Offset: 0px

Y Offset: 20px

Blur: 30px

Spread: 0px

✅ Copied to clipboard!

What you can set

Gradient: a start and end colour, and the direction: to right, left, top, bottom, 45° or 135°.
Shadow: colour, X and Y offset, blur and spread.

The preview card updates as you move each control. The CSS underneath is ready to paste into your stylesheet.

Visual generators that write the CSS for you.