Box Shadow Generator
Build CSS box-shadow values visually โ multiple layers, full control, copy the CSS.
Presets
CSS
Shadow Layers
What is CSS box-shadow?
The CSS box-shadow property adds shadow effects around an element's frame. A shadow is defined by its horizontal offset (X), vertical offset (Y), blur radius, spread radius, and colour. Multiple shadows can be layered by separating them with commas โ a common technique for realistic depth effects or neon glows.
The inset keyword flips the shadow inside the element, useful for pressed-button effects or inner highlights. This generator lets you build up complex multi-layer shadows visually with instant feedback, then copy the exact CSS to use in your project.
How to Use
- Adjust the sliders for X offset, Y offset, Blur and Spread.
- Pick a shadow colour and set its Opacity.
- Toggle Inset for an inner shadow effect.
- Click + Add layer to stack multiple shadow layers.
- Click โฟป Copy CSS to copy the full
box-shadowdeclaration.
Frequently Asked Questions
Spread expands or contracts the shadow's size before the blur is applied. A positive spread makes the shadow larger than the element; a negative spread shrinks it. Setting blur to 0 and spread to a small positive value creates a solid, sharp border-like effect โ useful for stacking a flat "offset copy" look popular in neo-brutalist design.
Layering shadows creates more realistic depth. A single shadow with a large blur looks flat; a small tight shadow paired with a softer larger one simulates how real objects cast both a sharp contact shadow and a diffuse ambient shadow. Many design systems (like Material Design and Tailwind) define shadows this way. Layering can also achieve glow effects by combining coloured inset and outset shadows.
No. Everything runs entirely in your browser. Nothing is sent to any server.