Free Box Shadow Generator

Design depth with precision. Adjust horizontal and vertical offset, blur, spread, color, and opacity on sliders, toggle inset for inner shadows, and watch the live preview update instantly — then copy the production-ready CSS straight into your project.

CSS output


    

    
    
    



  
Private by design. This tool runs 100% in your browser — your code is never uploaded to any server.

  

    
How to Use the Box Shadow Generator

    
    
      
  1. Drag the sliders for X/Y offset, blur radius, and spread.
    2. 
      
  2. Pick a shadow color and tune its opacity.
    3. 
      
  3. Enable inset if you want an inner shadow instead of a drop shadow.
    4. 
      
  4. Click Copy CSS and paste the box-shadow rule into your stylesheet.
    5. 
    

  

  

    
Features

    
Five dedicated sliders cover every numeric part of the box-shadow syntax, a native color picker plus an opacity slider handle the color stop, and the inset toggle switches between drop and inner shadows. The preview renders on a neutral card so you can judge softness and distance realistically, and the output uses compact rgba() color for easy theming.

    
Benefits & Use Cases

    
Designers craft card elevations, button press states, modal depth, and neumorphic interfaces visually instead of tweaking numbers blind. The generated shorthand is clean and framework-agnorant — it works in plain CSS, Tailwind arbitrary values, and styled-components alike — and inset mode covers form-field and well effects too.

    
Tips

    
Large blur with zero offset creates soft ambient glows; negative spread tightens a shadow for crisp material-style elevation. Keep shadows subtle on light UIs — 10–20% black opacity usually beats 50%. For dark mode, use a lighter shadow color or a colored glow instead of pure black.

  

  

    
Frequently Asked Questions

    
What is the box-shadow syntax order?
box-shadow: offset-x offset-y blur-radius spread-radius color. Add the keyword inset at the start for an inner shadow. Blur and spread are optional; color defaults to the text color if omitted.

    
What is the difference between inset and outset shadows?
Outset (the default) casts the shadow outside the element’s box, creating lift. Inset draws it inside the border edge, creating pressed-in or inner-glow effects.

    
Can I layer multiple box shadows?
Yes — separate them with commas, e.g. box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.15). Shadows stack front-to-back in the order listed.

    
Does box-shadow hurt performance?
Large blurred shadows can cost GPU time, especially when animated. Prefer transform and opacity animations, and keep blur radii modest on elements that move.

    
Why does my shadow look cut off?
A parent with overflow: hidden clips shadows. Either add padding/margin around the element or move the shadow to an inner wrapper.

  

  

    
Related Tools

    

      
Border Radius Generator
Set each corner with sliders and copy the CSS border-radius code instantly. Free border radius generator with live preview — no sign-up needed.
Open tool →
      
CSS Gradient Generator
Build linear, radial and conic CSS gradients visually and copy the code. Free CSS gradient generator with live preview — no sign-up.
Open tool →
      
CSS Formatter
Beautify messy CSS instantly with NToolHub’s free CSS formatter. Clean indentation, readable rules, comment-safe — 100% private in-browser tool.
Open tool →
      
Hex to RGB
Convert HEX codes to RGB values instantly with a live color preview. Free HEX to RGB converter, one-click copy — no sign-up needed.
Open tool →
      
Color Code Converter
Convert colors between HEX, RGB and HSL instantly with NToolHub’s free converter. Live preview swatch, one-click copy — private and fast.
Open tool →