CSS box-shadow Generator

Generate box-shadow with live preview.

▶About this tool

This tool generates box-shadow visually. Three features: 1) Adjust offset, blur, spread, color with sliders, 2) Add multiple shadows, 3) Copy generated CSS directly. Ideal for card elevation and button press effect.

Tool interface

Parameter guide

X/Y offset=shadow direction, Blur=softness, Spread=expansion, Color/Opacity=appearance. Preview updates in real-time.

15%
Shadow appears here 
  
 
 
  
   
 
 
 
Usage
 
     
  1. Adjust offset, blur, spread, color with sliders
  2. Preview the shadow appearance
  3. Copy generated CSS. Multiple shadows supported
    4.  
 
 
 
When to use
 
Card elevation, button press effect, modal shadow, depth.
 
 
 
Examples
 
0 4px 6px -1px rgba(0,0,0,0.1), 0 10px 15px -3px rgba(0,0,0,0.1)
 
  
 
FAQ
 
 
 
How to write box-shadow?
 
box-shadow: offsetX offsetY blur spread color; e.g. 0 4px 6px rgba(0,0,0,0.1). Add inset for inner shadow.
 
 
How to add multiple shadows?
 
Separate with commas. box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05). First is on top.
 
 
box-shadow vs drop-shadow?
 
box-shadow = rectangular shadow. filter: drop-shadow() = follows element shape (ignores transparent). Use drop-shadow for icons.
 
 
Blur vs spread?
 
Blur = softens edges. Spread = enlarges/shrinks shadow. Negative spread makes shadow smaller.
 
 
 
 
 
Related tools
  
 
 
 
 
 
Color & Design Set