CSS box-shadow generator
Adjust offset, blur, spread and colour with a live preview.
CSS box-shadow generator
Build a CSS box-shadow visually and copy the code. Adjust horizontal and vertical offset, blur, spread, colour and the inset option, and see the result update live on the preview box.
The box-shadow syntax
box-shadow: [inset] offset-x offset-y blur spread color; — for example box-shadow: 0 6px 12px 0 #146c43;. Positive offsets push the shadow right and down; blur softens the edge; spread grows or shrinks it; inset draws the shadow inside the element.
Frequently asked questions
What does spread do? A positive spread makes the shadow larger than the element; a negative one makes it smaller.
What is an inset shadow? It renders the shadow inside the box, useful for pressed or recessed effects.