Box Shadow Generator
Generate CSS box-shadow with sliders for offset, blur, spread, and color.
Adjust offset, blur, spread, and color to build a box-shadow. Copy the CSS when it looks right.
box-shadow: 4px 4px 12px 0px #00000040;About Box Shadow Generator
Adjust horizontal offset, vertical offset, blur radius, spread, color, and inset with sliders and see the shadow update instantly. Copy the CSS rule when it looks right.
How it works
Drag the sliders to control each shadow property: horizontal and vertical offset move the shadow's position, blur softens the edges, and spread expands or contracts it. Pick a color (including alpha for transparency) and toggle inset for inner shadows. The preview box updates live so you see the exact result before copying.
When you'd use this
- Adding depth to cards, modals, and dropdown menus
- Creating subtle elevation for buttons on hover
- Building layered shadow effects for Material Design or neumorphic styles
- Inset shadows work well for pressed-button states and inner glow effects
Box shadow syntax
The CSS box-shadow property takes values in this order: optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. Positive offsets move the shadow right and down. Negative offsets go left and up. Blur of 0 creates a hard edge. Spread expands the shadow beyond the element's bounds (or shrinks it with negative values).