shadow Box Shadow Generator

Create beautiful CSS box shadows visually with multiple layers, presets, and instant code output

Preview

Shadow Settings

0px
4px
10px
0px
%

Shadow Layers

Add multiple shadow layers for more complex effects. Each layer stacks on top of the previous.

widgets Box Settings

expand_more
px
px
px

Presets

Click to apply professional shadow styles

CSS Code


        
        

            
        

    

    
    
    

        
About the CSS Box Shadow Generator

        
Create beautiful CSS box shadows visually with our free online generator. Design subtle elevations, dramatic depth effects, neumorphic styles, and glowing elements with instant CSS code output.

        
        
Features

        
    
            
  • Visual Controls — Intuitive sliders for offset, blur, spread, and opacity
    • 
            
  • Multiple Layers — Stack shadows for complex, realistic effects
    • 
            
  • Inset Shadows — Create inner shadows for pressed or carved effects
    • 
            
  • Professional Presets — 12 ready-to-use shadow styles
    • 
            
  • Customizable Box — Adjust preview box size, color, and border radius
    • 
            
  • Live Preview — See changes instantly as you adjust settings
    • 
            
  • Multiple Outputs — CSS, HTML snippet, or Tailwind arbitrary values
    • 
        

        
        
Understanding Box Shadow

        
The CSS box-shadow property adds shadow effects around an element's frame. The syntax is:

        
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

        
        

            
                

                    Value
                    Description
                    Default
                

            
            
                

                    inset
                    Changes shadow from outer to inner (optional)
                    outset
                

                

                    offset-x
                    Horizontal offset. Positive = right, negative = left
                    Required
                

                

                    offset-y
                    Vertical offset. Positive = down, negative = up
                    Required
                

                

                    blur-radius
                    Higher value = more blur, softer shadow
                    0
                

                

                    spread-radius
                    Positive = expand, negative = contract
                    0
                

                

                    color
                    Shadow color (supports rgba for transparency)
                    currentColor
                

            
        

        
        
Shadow Design Tips

        
    
            
  • Light Direction — Keep shadows consistent, typically from top-left (negative Y offset)
    • 
            
  • Subtlety — Use low opacity (10-30%) for natural-looking shadows
    • 
            
  • Layering — Multiple soft shadows look more realistic than one hard shadow
    • 
            
  • Colored Shadows — Use the element's color with reduced opacity for cohesive designs
    • 
            
  • Elevation — Increase blur and offset together to suggest height
    • 
        

        
        
Common Shadow Patterns

        
    
            
  • Card Shadow — Subtle elevation for cards and containers: 0 4px 6px rgba(0,0,0,0.1)
    • 
            
  • Button Hover — Increased depth on interaction: 0 10px 20px rgba(0,0,0,0.2)
    • 
            
  • Modal/Dialog — Strong shadow for overlay elements: 0 25px 50px rgba(0,0,0,0.3)
    • 
            
  • Inset Field — Input field pressed effect: inset 0 2px 4px rgba(0,0,0,0.1)
    • 
            
  • Neumorphic — Soft UI with dual shadows: light shadow top-left, dark shadow bottom-right
    • 
        

        
        
Browser Support

        
The box-shadow property is supported in all modern browsers. For older browsers (IE9 and below), vendor prefixes may be needed:

        
    
            
  • -webkit-box-shadow — Safari, older Chrome
    • 
            
  • -moz-box-shadow — Older Firefox
    • 
        

        
        
Privacy & Client-Side Processing

        
This tool runs entirely in your browser. No data is sent to any server, and all shadow calculations and CSS generation happen locally on your device.