Box-shadow Generator

multi-layer · inset · custom property

The Box-shadow Generator lets you compose multi-layer shadows with optional inset, full control over offset, blur, spread, color, and opacity, a live preview, quick presets, and one-click copy as plain box-shadow or as a CSS custom property (--box-shadow).

Shadow layers
Element
Border radius 12px
Width 200px
Height 120px
Shadow presets
CSS output 

                                    

                                

                            

                        

                    


                    

                        
Tips for CSS shadows

                        
  • More layers: stack subtle shadows rather than one heavy blur for a cleaner, more realistic depth.
  • Inset: great for “pressed” states, wells, and inner depth; pair with outer shadows to clarify hierarchy.
  • Custom property: store the value in --box-shadow and reuse it across components from a single token.
  • Background contrast: use the preview swatches to check readability on light, dark, and tinted surfaces.