CSS Box Shadow Generator Online
Build CSS box shadows visually with live preview. Drag sliders to adjust offset, blur, spread, and color. Switch to inset mode for inner shadows. Copy the ready-to-use CSS in one click. No signup, runs entirely in your browser.
box-shadow: 4px 8px 16px 0px #00000040;How the CSS Box Shadow Generator Works
- 1Drag the Offset X and Offset Y sliders to position the shadow — negative values move it left/up.
- 2Adjust Blur Radius for edge softness (0 = sharp) and Spread Radius to grow or shrink the shadow size.
- 3Choose a shadow color — use partial transparency (hex with alpha or rgba) for natural-looking depth.
- 4Enable Inset to flip the shadow inside the element. Click Copy CSS to get the complete declaration.
The box-shadow CSS Property
The box-shadow property accepts one or more shadow layers, comma-separated. Each shadow is defined as: [inset?] offset-x offset-y blur spread color. A box-shadow with no blur and no spread is a sharp, solid drop shadow. Adding blur spreads the shadow edges smoothly. The color's alpha channel controls how the shadow blends with the background beneath it.
Box Shadow Design Patterns
Subtle Card Elevation
Use a small Y offset, medium blur, low opacity: 0 2px 8px rgba(0,0,0,0.08). Looks natural on white cards over light backgrounds.
Hover Lift Effect
Transition from a small shadow to a larger one on hover: start with 0 2px 4px and transition to 0 8px 24px on :hover.
Layered Shadows
Stack two shadows — one close and sharp, one far and soft — for a more realistic depth. Used by Material Design and Apple's HIG.
Pressed Button State
Use an inset shadow on :active to simulate a pressed button. A small inset with dark color makes the button appear to sink in.
Glow Effect
Use a spread of 4–8px with no offset and no blur, using a bright color with some opacity: 0 0 0 6px rgba(102,126,234,0.3).
Performance Note
Box shadows are repainted on scroll and animation. For animated shadows, consider transitioning opacity on a pseudo-element shadow instead.
Frequently Asked Questions
What are the box-shadow parameters?
The CSS box-shadow property takes: offset-x (horizontal shift, positive = right), offset-y (vertical shift, positive = down), blur-radius (higher = softer edge), spread-radius (positive expands, negative contracts), and color. Optionally the keyword inset places the shadow inside the element instead of outside.
What is the difference between blur and spread?
Blur controls how soft the shadow's edges are — a blur of 0 gives a sharp-edged shadow. Spread controls how large the shadow is before blurring begins — positive spread makes the shadow bigger than the element, negative spread makes it smaller. You can use a negative spread with positive blur to create a subtle depth effect.
Can I add multiple shadows to one element?
Yes — CSS box-shadow accepts a comma-separated list. Each shadow is rendered from front to back. Manually edit the CSS output to add multiple shadows, e.g.: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 10px 40px rgba(0,0,0,0.08);
What is an inset shadow?
An inset shadow renders inside the element's border instead of outside. It creates a concave appearance, as if the element is pressed in or has an inner glow. Common uses: pressed button states, input field focus rings, and depth effects on cards.
What color format should I use for shadows?
rgba() is the best choice for shadows because it allows transparency. Solid shadows look heavy and unnatural. A typical starting point is rgba(0, 0, 0, 0.15) — a 15% black shadow that blends naturally with any background color.
Is box-shadow supported in all browsers?
Yes — box-shadow has full support in every modern browser including Chrome, Firefox, Safari, Edge, and Opera, without any prefixes. It has also been supported since IE 9. No -webkit- or -moz- prefix is needed.