CSS Box Shadow Generator

Visually design CSS box-shadow with live preview, sliders for offset, blur, spread, color, opacity, and inset.


  

  

    
    
  



    

    

      
Design the perfect CSS box-shadow visually with this free generator. Drag sliders for horizontal and vertical offset, blur, spread, and opacity, pick a shadow color, and flip on inset for inner shadows. The live preview updates as you tweak, and you copy a clean, ready-to-paste box-shadow rule — all in your browser with nothing to install.

      

        
What is a CSS box-shadow generator?

        
A CSS box-shadow generator is a visual tool that builds the box-shadow property for you. Instead of guessing pixel values, you adjust offset, blur, spread, color, and opacity with sliders and watch a live preview, then copy the exact box-shadow CSS to drop into your stylesheet.

        
      

      

        
How to generate a box-shadow

        
Use the sliders to position and soften the shadow, choose its color, and toggle inset for an inner shadow. When the preview looks right, copy the generated CSS rule.

        
  1. Set the horizontal and vertical offset to move the shadow.
  2. Increase the blur radius for a softer shadow or the spread to grow it.
  3. Pick a shadow color and set the opacity for subtlety.
  4. Turn on Inset if you want an inner shadow instead of a drop shadow.
  5. Click Copy CSS to grab the ready-to-paste box-shadow rule.

      

      

        
Why use this box-shadow generator?

        
  • Live preview updates instantly as you adjust every value.
  • Full control over offset, blur, spread, color, and opacity.
  • Inset toggle for inner shadows as well as drop shadows.
  • Outputs an rgba() color so opacity is baked into the shadow.
  • One click copies a clean, ready-to-paste box-shadow rule.
  • 100% free and private — everything runs in your browser.

      

      

        
Frequently asked questions

        

          
What do the box-shadow values mean?

          
The box-shadow property takes horizontal offset, vertical offset, blur radius, spread radius, and a color: box-shadow: x y blur spread color. Positive offsets push the shadow right and down, blur softens the edge, and spread grows or shrinks the shadow.

        

        

          
What is an inset shadow?

          
Adding the inset keyword draws the shadow inside the element instead of outside, creating an inner or pressed-in look. Toggle the Inset option to add it to the generated CSS.

        

        

          
Why is the color output as rgba()?

          
The opacity slider is applied through the alpha channel of an rgba() color, so the shadow color and its transparency travel together in a single value. This is the most reliable way to control shadow opacity in CSS.

        

        

          
Can I add more than one box-shadow?

          
Yes. In CSS you can apply multiple shadows by separating them with commas, for example box-shadow: 0 1px 2px #0003, 0 4px 8px #0002. This tool generates a single shadow you can copy and combine as needed.