CSS Box Shadow Generator
Create beautiful CSS box shadows visually. Add multiple shadow layers, tweak offsets, blur, spread, color and opacity, then copy the generated code. Everything runs in your browser.
Import Existing CSS
Shadow Presets
How to Use CSS Box Shadows
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows separated by commas. Each shadow is described by horizontal and vertical offsets, optional blur and spread radius, color, and an optional inset keyword.
Syntax
The full syntax is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;. All offset, blur, and spread values are in pixels. The color can be any valid CSS color including rgba() for transparency.
Multiple Shadows
You can stack multiple shadows by separating them with commas. Shadows are rendered front to back — the first shadow sits on top. This technique lets you create complex, layered shadow effects like Material Design elevations or neumorphism.
Inset Shadows
Adding the inset keyword changes the shadow from an outer shadow (outset) to an inner shadow. Inset shadows appear inside the element's border, creating a pressed or recessed effect.
Features
- Add, remove, and toggle multiple shadow layers
- Per-layer controls for offset, blur, spread, color, opacity, and inset
- Linked slider and number inputs for precise control
- Live preview updates in real time
- Customize the preview box (background, size, border-radius)
- 12 built-in presets including Material Design and neumorphism
- Import existing box-shadow CSS to edit visually
- Undo/redo support for all changes
- Optional
-webkit-box-shadowprefix in output - One-click copy of generated CSS code
- 100% client-side — nothing is sent to any server
Browser Support
box-shadow is supported in all modern browsers without vendor prefixes. If you need to support very old browsers (IE 9+), enable the -webkit- prefix option to include the prefixed version in the output.