shadow.svgCreate and customize CSS box shadows, combine multiple shadow layers, use inset shadows, reorder layers and apply ready-made presets
Box Shadow Generator
Today
180 × 180px
Width180px
Height180px
Shadows (1)
Shadow 1
0px
10px
30px
-5px
box-shadow: 0px 10px 30px -5px #00000040;Just click on the desired shadow
Soft shadows
Soft
Soft deep
Soft wide
Floating
Subtle
Cloud
Elevation
Level 1
Level 2
Level 3
Level 4
Level 5
Directional
Bottom
Top
Left
Right
Diagonal
Diagonal reverse
Sharp & hard
Hard
Hard wide
Offset
Spread
Comic
Inset
Inset soft
Inset deep
Inset top
Inner border
Inner glow
Colored shadows
Purple
Pink
Blue
Green
Red
Orange
Layered
Soft layers
Deep layers
Color stack
Neon stack
Outer + inset
Glow & neon
Purple glow
Pink glow
Blue glow
Green glow
Red glow
Feedback