CSS Box Shadow Generator
Design CSS box-shadow effects with a live preview. Adjust offset, blur, spread, color, and opacity — copy the CSS instantly.
Presets
Shadow Settings
CSS Output
box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.25);
Value Breakdown
H-offset
0px
V-offset
4px
Blur
16px
Spread
-2px
Color
rgba(0, 0, 0, 0.25)
Inset
No
CSS Box Shadow: Syntax, Realistic Shadows & Elevation
1. box-shadow Syntax Breakdown
The full syntax is box-shadow: [inset] h-offset v-offset blur spread color;. Only the horizontal and vertical offsets are required — blur, spread, and color all have sensible defaults if omitted, though this tool always outputs all four length values explicitly for clarity. A positive vertical offset moves the shadow down (a light source above the element); a positive horizontal offset moves it right. Blur radius is always non-negative, while spread can be positive (expanding the shadow) or negative (shrinking it).
2. How to Use This Generator
Pick a preset (Soft Card, Glow Teal, Deep Shadow, Inset Press, Neon Violet, Hard Edge) as a starting point, or build from scratch with the four sliders (X/Y offset, blur, spread), the color picker plus opacity slider, and the inset checkbox. The live preview box and the Value Breakdown panel below it update instantly. Copy the generated box-shadow declaration and paste it into your stylesheet, component styles, or a WordPress block's custom CSS field.
3. Building Realistic, Elevation-Based Shadows
Real-world shadows are soft and directional, not sharp and centered — a small vertical offset (2-8px), a generous blur radius (16-32px), a slight negative spread, and low opacity (15-30%) typically reads as a natural, subtle elevation effect (the “Soft Card” preset follows this recipe). For a stronger sense of depth, layer two shadows — a tight, darker shadow close to the element plus a soft, lighter shadow further out — which is how many modern design systems (Material Design, for example) simulate multiple light sources for a more convincing elevated appearance. This tool builds one shadow layer at a time; combine two generated outputs with a comma to stack them.
4. Common Mistakes
A common mistake is using pure black at high opacity for every shadow, which looks harsh and artificial — real shadows are rarely pure black, and a slightly desaturated dark color (or even a subtle tint matching the background) usually looks more natural. Another is over-blurring without reducing opacity, producing a washed-out, foggy effect instead of a crisp elevation cue — increasing blur and decreasing opacity together generally reads better than increasing blur alone. Finally, remember that overflow: hidden on a parent element clips shadows applied to its children, a frequent source of “my shadow isn't showing up” confusion.
5. Limitations
This tool builds and previews one shadow layer at a time; multi-layer stacked shadows (common in elevation systems) need to be combined manually by joining two generated declarations with a comma. It also does not generate filter: drop-shadow(), which behaves differently from box-shadow (it follows the actual alpha shape of an element, including transparent PNGs and irregular shapes, rather than the element's rectangular box) and is a better fit for shadows on non-rectangular or transparent-background images.
Frequently Asked Questions
What is CSS box-shadow?
box-shadow adds one or more shadow effects to an element. Each shadow is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Multiple shadows are comma-separated.
What is the difference between blur and spread?
Blur radius controls how soft/diffused the shadow edges are — higher values create softer, more diffuse shadows. Spread radius expands or contracts the shadow size relative to the element — positive values enlarge it, negative values shrink it.
What does "inset" do?
The inset keyword makes the shadow appear inside the element rather than outside it, creating a pressed-in or engraved visual effect.
Can I stack multiple box shadows?
Yes. CSS supports multiple comma-separated box-shadow values on a single element, rendered front-to-back. This tool lets you build and preview a single shadow layer — for stacked shadows, combine multiple generated values manually.
Why does this tool output rgba() instead of a hex color with an opacity property?
box-shadow does not have a separate opacity property — transparency has to be baked into the color value itself. This tool converts your hex color and opacity slider into an rgba() value automatically, which is the standard way to express a semi-transparent shadow color in CSS.
Why use negative spread values in a shadow?
A negative spread shrinks the shadow relative to the element's box before blur is applied, which is a common technique for soft, realistic-looking drop shadows — it keeps the shadow from extending too far past the element's edges while still using a generous blur radius. The "Soft Card" and "Deep Shadow" presets both use this pattern.
Does box-shadow affect layout or trigger reflow?
No — box-shadow is purely a visual paint effect and does not affect the element's box model, layout, or the position of surrounding elements, unlike a real border or margin change. This also means it is generally cheap to animate compared to properties that trigger layout recalculation.