Box Shadow Generator
Generate CSS box-shadow values with a live visual preview.
How to Use Box Shadow Generator
Move horizontal and vertical offset sliders to position the shadow relative to the element.
Blur controls softness. Spread makes the shadow larger or smaller than the element.
Choose a shadow color and adjust opacity to get the exact look you want.
Click "Copy CSS" to copy the generated box-shadow property and paste it into your stylesheet.
Features & Benefits
Instant Results
Real-time output as you type. No waiting, no page reloads, no server processing.
100% Private
Everything runs in your browser. Your data never leaves your device — ever.
Mobile Friendly
Fully responsive design tested on Chrome, Firefox, Safari, and Edge across all devices.
Always Free
No account, no subscription, no hidden fees. Unlimited usage, forever free.
Supported Formats
The generated CSS works with all modern browsers and supports:
About Box Shadow Generator
Understanding CSS Box Shadow
The CSS box-shadow property adds shadow effects around an element's frame. A single shadow is defined by: horizontal offset, vertical offset, blur radius, spread radius, and color. You can apply multiple shadows by separating values with commas.
Box Shadow Syntax
box-shadow: [inset] h-offset v-offset blur spread color;
- h-offset — Positive moves right, negative moves left
- v-offset — Positive moves down, negative moves up
- blur — 0 = sharp edges, higher values = softer shadow
- spread — Positive expands shadow, negative contracts it
- inset — Makes shadow appear inside the element
Popular Shadow Styles
- Soft UI (Neumorphism):
4px 4px 8px rgba(0,0,0,.1), -4px -4px 8px rgba(255,255,255,.8) - Material Design Card:
0 2px 4px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08) - Floating Button:
0 6px 20px rgba(0,0,0,.15) - Colored Glow:
0 0 20px 4px rgba(108,99,255,.4) - Hard Shadow:
4px 4px 0 0 #000
Performance Considerations
Box shadows trigger paint operations on scroll and animation, which can affect performance. For animated elements, consider using CSS filters (filter: drop-shadow()) instead, which can be GPU-accelerated. Avoid applying box shadows to thousands of elements on a page simultaneously.
Frequently Asked Questions
Horizontal offset — positive moves right, negative moves left. Vertical offset — positive moves down, negative moves up. Blur radius — 0 is sharp, higher values are softer. Spread radius — positive expands, negative contracts the shadow size.
Set horizontal and vertical offset to 0, increase the blur radius (30–60px), set spread to a small positive value, and choose a vibrant color. Reduce opacity to around 40–60% for a natural glow.
An inset shadow appears inside the element rather than outside. This is useful for creating pressed/sunken button effects or inner glow effects. Enable it with the "Inset shadow" checkbox.
Yes! CSS supports multiple shadows by separating them with commas. Enable the "Add second shadow layer" option in this tool to generate two-layer shadows. You can combine inset and non-inset shadows together.