Box-shadow Generator

multi-layer · inset · custom property

Enter a colour value in any format and get all conversions simultaneously. Live colour preview, recent conversion history and ready-to-paste CSS output.

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

                                    

                                

                            

                        

                    


                    

                        
The CSS box-shadow property is one of the most powerful and versatile for interface design: it creates soft shadows for cards and modals, elevation for Material/flat components and visible focus outlines. Its multi-parameter syntax (offset-x, offset-y, blur, spread, color) takes practice to calibrate to the desired visual result.
This generator provides:
  • Interactive sliders for X/Y offset, blur radius, spread radius and opacity
  • Colour picker with RGBA support for precise transparency
  • Multiple shadows: add, reorder and toggle each layer independently
  • Inset mode for inner shadows (input fields, embossed elements)
  • Categorised presets: soft shadow, material elevation, neumorphism, outline focus
  • Output as a direct box-shadow property or CSS custom variable (--shadow-sm, --shadow-md, etc.)
  • Preview on light, dark and coloured backgrounds
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.