Box Shadow Generator

Design CSS box shadows visually with a live preview. Add multiple layers, tweak offsets, blur, and spread, then copy the code. Everything runs in your browser.

How it works: Add a shadow layer, adjust its offsets, blur, spread, and color, then copy the CSS. The preview updates in real-time. You can stack multiple shadows for complex effects. No data is sent to any server.

Shadow 1
0
4
6
-1
10%
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);

What is CSS box-shadow?

The CSS box-shadow property adds one or more shadow effects to an element's frame. Shadows can be placed outside (default) or inside (inset) the box. They are commonly used to create depth perception, elevate cards above a background, highlight interactive elements on hover, and build realistic layered interfaces. Unlike images, box shadows are rendered by the browser at any resolution with zero extra requests.

Box Shadow Syntax Explained

The box-shadow shorthand accepts values in this order: offset-x, offset-y, blur-radius, spread-radius, color, and the optional inset keyword. Offset-x moves the shadow horizontally (positive = right), offset-y moves it vertically (positive = down). Blur-radius softens the edge — larger values produce a more diffuse shadow. Spread-radius expands or contracts the shadow size before blurring. Color can be any CSS color, including rgba() for transparency. Adding the inset keyword renders the shadow inside the element.

Multiple Shadows

CSS allows comma-separated shadow declarations on a single property, enabling complex layered effects. Designers stack shadows to simulate realistic lighting — a tight dark shadow for contact depth plus a large soft shadow for ambient light. Layering two or three shadows produces results that feel natural and polished. Keep performance in mind: each shadow triggers extra painting, so avoid stacking more than four or five on elements that animate frequently.

Box Shadow Tips

  • Use rgba() or hsla() colors so shadows blend naturally with any background
  • Avoid blur values above 40px on mobile — large shadows hurt scroll performance
  • Combine a small tight shadow with a large soft one for realistic elevation
  • Use inset shadows for pressed-button effects and inner glows
  • Keep spread at 0 for the most natural-looking drop shadows
  • Test shadows on both light and dark backgrounds to ensure contrast