color
Box Shadow
design a CSS box-shadow visually.
about
Drag the sliders to design a box-shadow. Live preview + CSS code you can copy.
how to use
- Drag the x, y, blur, and spread sliders.
- Pick a shadow color and toggle inset if you want it inside.
- Click the code at the bottom to copy the CSS.
examples
- Design a soft drop shadow for a card.
- Create a hard 4px offset shadow for a neobrutalist button.
- Add an inset shadow for a pressed-in feel.
faq
What's spread?
How much the shadow grows or shrinks beyond the element's edge. Negative values pull it inward.
What's the difference between blur and spread?
Blur softens the edge. Spread changes the size before blur is applied.