✦
Vermillyx Utilities
Box Shadow Generator
Generate customizable CSS box shadows with controls for offset, blur, spread, color, and opacity.
ACT I
Shadow Controls
0px
12px
24px
0px
20%
Shadow Color
ACT II
Preview
Preview
CSS
box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.2);✦
What is a CSS box shadow?
A quick look behind the curtain
✦
How do you use the box shadow generator?
Five controls, one shadow
✦
What do the shadow values mean?
A closer look at the four main measurements
✦
Are my settings sent to a server?
A peek backstage at your privacy
🎟️ Backstage note
A little shadow can make an interface feel grounded, floating, or wonderfully dramatic. Adjust the offset, blur, spread, and opacity until your CSS finds the right lighting.