CSS Box Shadow Generator
Create layered box shadows with live preview and CSS code.
About the CSS Box Shadow Generator
The CSS Box Shadow Generator produces ready-to-paste box-shadow declarations with all six parameters exposed: horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword. Adjust the sliders, watch the preview update live, and copy the generated CSS into your stylesheet.
Box shadows are the cheapest way to add depth to a UI. A subtle drop shadow lifts a card off the background, an inset shadow creates the impression of a pressed button or recessed input, and layered shadows can produce soft ambient depth that mimics real-world lighting. Unlike images or 3D transforms, box shadows are GPU-accelerated, take zero bytes of payload, and animate smoothly at 60fps.
The trick to good shadows is restraint. Production design systems (Material Design, Apple HIG, Tailwind UI) recommend low opacity (10-25%) and large blur radii (10-40px) for ambient shadows, with sharper, darker shadows reserved for raised/focused states. A common mistake is using pure black at 100% opacity — this looks harsh and dated. This tool defaults to 25% opacity black, which is a good starting point.
How It Works
The CSS box-shadow property takes up to six values in this order: [inset] offset-x offset-y blur-radius spread-radius color. The inset keyword is optional and changes the shadow from outside-the-box to inside-the-box.
- offset-x, offset-y — the shadow’s displacement from the box, in pixels. Positive values move right/down; negative move left/up.
0 0places the shadow directly behind the box, creating a halo effect. - blur-radius — the Gaussian blur applied to the shadow.
0produces a hard-edged duplicate of the box;30+produces a soft ambient glow. Cannot be negative. - spread-radius — expands or contracts the shadow shape. Positive values make the shadow larger than the box; negative values make it smaller. Use negative spread to create the “floating card” look where the shadow is tighter than the box itself.
- color — any valid CSS color.
rgba()with alpha is preferred over solid colors because it allows the background to show through, simulating realistic ambient occlusion.
The tool converts the hex color input and opacity slider into a single rgba(r, g, b, a) value. This is the modern convention because it avoids the layering issues that arise when you stack multiple shadows with different opacities on the same element.
For multi-layer ambient shadows (the modern “floating card” look used by Stripe, Linear, and Vercel), the typical pattern is two or three shadows: a tight, dark, low-blur shadow for contact definition, and a wider, lighter, high-blur shadow for ambient depth. The tool generates a single shadow; you can compose multiple by hand-editing the CSS to add comma-separated additional shadow values.
Worked Examples
The default settings (x=0, y=10, blur=20, spread=-5, color #000000, opacity 25%) produce a soft, ambient drop shadow that lifts a card off the background. The negative spread makes the shadow tighter than the box, so it appears as a soft glow beneath rather than a duplicate of the box outline. The CSS output is box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25); — the kind of shadow used by modern SaaS apps.
For a pressed button effect, set inset=yes, x=0, y=2, blur=4, spread=0, color #000000, opacity 20%. The shadow appears inside the box, simulating a recessed control. The CSS becomes box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.2);.
For a sharp, prominent shadow (Material Design elevation), set x=0, y=8, blur=10, spread=-3, opacity 35%. This produces a defined, slightly tighter shadow than the ambient default — useful for hover states on cards.
For a neon glow effect, set the shadow color to match the box background (e.g., #667eea), x=0, y=0, blur=30, spread=0, opacity 80%. The shadow radiates uniformly around the box, simulating an emissive surface. The CSS becomes box-shadow: 0px 0px 30px 0px rgba(102, 126, 234, 0.8);.
When to Use This Tool
- Styling card components with ambient shadows that respond to hover and focus states.
- Building Material Design-style elevation systems with consistent shadow tiers (1dp, 2dp, 4dp, 8dp).
- Creating pressed/recessed button states with inset shadows.
- Designing modal dialogs and popover tooltips with prominent drop shadows.
- Producing neon glow effects for hero sections, CTA buttons, and brand-element highlights.
- Adding depth to image cards, video thumbnails, and gallery items without using background images.
- Demoing box-shadow syntax in frontend training and tutorials.
Limitations & Disclaimer
This tool generates a single box-shadow with hex+opacity color input. It does not support layered shadows (comma-separated multiple values), CSS variables, currentcolor keyword, or filter-based drop-shadow (which is more accurate for non-rectangular shapes). The preview uses a fixed-size square; for irregularly-shaped elements, test the shadow in your actual layout. Shadows on transformed (rotated, skewed) elements may render incorrectly because the shadow is computed in the box’s local coordinate system. For non-rectangular elements (SVG icons, clip-path shapes), use filter: drop-shadow() instead of box-shadow. See our disclaimer for full terms.
Frequently Asked Questions
What is the difference between blur and spread?
Blur applies a Gaussian blur to the shadow’s edges, softening it. Spread expands or contracts the shadow shape itself, making it larger or smaller than the box. A 30px blur with 0 spread produces a soft halo the same size as the box. A 0 blur with 30px spread produces a hard-edged duplicate 30px larger than the box.
Why are my shadows harsh and dated-looking?
Pure black at 100% opacity is the giveaway of amateur design. Real-world shadows are not pure black — they are the ambient color of the surrounding environment, dimmed. Use opacity 15-30% for ambient shadows, and consider tinting the shadow color to match your background (e.g., a slightly blue-tinted shadow on a white background looks more natural than pure black).
How do I layer multiple shadows?
Separate each shadow with a comma: <code>box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.15);</code>. The first shadow is rendered on top. Layered shadows produce the modern “floating card” look used by Stripe and Linear: a tight, dark, low-blur shadow for contact definition, plus a wider, lighter, high-blur shadow for ambient depth.
Are box shadows GPU-accelerated?
Yes, in modern browsers. Shadows are rendered in the compositor thread and animate smoothly at 60fps when only the offset changes. Animating the blur or spread is more expensive because it requires repainting. For performant hover effects, animate <code>transform</code> rather than <code>box-shadow</code> when possible, or precompute the shadow and toggle it via class swap.
What does inset do?
The <code>inset</code> keyword flips the shadow from outside-the-box (default) to inside-the-box. Inset shadows appear within the box’s border box, simulating a recessed or pressed surface. Common uses: pressed button states, recessed input fields, and well/panel backgrounds that should look indented.
Can I use box-shadow on text?
No, <code>box-shadow</code> applies to the element’s box, not the text glyphs. For text shadows, use the <code>text-shadow</code> property, which has the same syntax minus the spread radius and inset keyword. <code>text-shadow: 2px 2px 4px rgba(0,0,0,0.5);</code> is the typical usage.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team