Box shadow generator

Tune offset, blur, spread, color and opacity with the sliders: the shadow updates in real time and the CSS code is ready to copy.

25% 

    
    


    
🔒 Everything happens in your browser: no data is sent or stored.

  


  

    
How to read the box-shadow syntax

    
The values always come in the same order: horizontal offset, vertical offset, blur radius,
    spread radius and color. The offsets move the shadow relative to the element, the blur softens
    its edge, and the spread grows the shadow (or shrinks it, with negative values) before the blur
    is applied. Adding the inset keyword flips the shadow to the inside of the box —
    handy for "sunken" effects on inputs and pressed buttons.

    
Tips for a realistic shadow

    
Convincing shadows are mostly transparent: keep the opacity between 10% and 30% and increase
    the blur instead of darkening the color. Keep the Y offset larger than the X offset, since in
    the real world light usually comes from above. For extra depth, stack multiple shadows separated
    by commas: a small, crisp one close to the element plus a large, soft one further away.