What This Tool Does
This CSS box-shadow generator lets you interactively design shadows by controlling offset (x, y), blur radius, spread radius, color, opacity, and inner/outer (inset) mode. The preview updates in real time and you can copy the complete CSS declaration ready to paste into your stylesheet.
Inputs Explained
- Horizontal Offset: How far to shift the shadow left/right (in pixels).
- Vertical Offset: How far to shift the shadow up/down.
- Blur Radius: How soft the shadow edge is. Higher = softer.
- Spread Radius: Expands or contracts the shadow. Negative values shrink it.
- Color & Opacity: Shadow color with alpha (transparency).
- Inset: Inner shadow (inside the box) instead of outer.
How It Works
The tool constructs the CSS string as: box-shadow: [inset]
Formula / Logic Used
CSS Box Shadow Generator
Design pixel-perfect CSS shadows with a live preview and copy-ready code.
CSS Code
Step-by-Step Example
Settings: H=0, V=4, Blur=12, Spread=0, Color=#000, Opacity=15%
CSS Output: box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
This is a common 'card' shadow used in Material Design and many modern UI frameworks. It gives a subtle lift without being distracting.
Use Cases
- Card layouts: Add subtle shadows to elevate cards above the page background.
- Buttons and CTAs: Create pressed or hover states with dynamic shadows.
- Modal and popover design: Generate deeper shadows that separate overlays from page content.
- Focus rings for accessibility: Custom focus indicators using colored shadow with 0 offset.
- Neumorphic design: Create soft inner shadows for modern neumorphic UI styles.
Assumptions and Limitations
- Only one shadow per generator. For multiple shadows (soft + hard, layered), combine multiple box-shadow values separated by commas manually.
- The preview uses a fixed card shape — real-world shadows may look different on rounded corners, circles, or complex shapes.
- Very large blur or spread values may hurt performance on low-end devices.
- Print media often ignores box-shadow; design for both screen and print if needed.
Frequently Asked Questions
What do the 4 numeric values mean?
In order: horizontal offset (moves shadow left/right), vertical offset (up/down), blur radius (softness), and spread radius (size). All in pixels. Positive vertical offset creates a shadow below the box (most common).
What's the difference between blur and spread?
Blur softens the shadow edge (larger blur = softer, more diffuse). Spread changes the shadow's size (positive spread makes the shadow bigger than the box, negative makes it smaller).
What is an inset shadow?
Inset shadows appear inside the box instead of outside, creating a pressed-in or embossed look. Use them for input fields, pressed buttons, or decorative frames.
How do I make a subtle shadow?
Low opacity (10-20%), small vertical offset (2-4px), moderate blur (8-15px), and zero spread. This matches most modern design systems like Material Design and Tailwind.
Can I add multiple shadows?
Yes — CSS supports multiple shadows by separating them with commas. For example: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05). Combine this tool's output manually.
Do shadows affect layout?
No. Box-shadows don't affect document flow or element dimensions. They're purely visual and won't push surrounding elements around.
Do shadows work on images?
Yes, box-shadow works on any HTML element with dimensions, including . For shadows that follow image transparency (like PNGs with cutouts), use filter: drop-shadow() instead.
Is my shadow code stored?
No. The generator runs entirely in your browser. Your settings never leave your device.
Sources and References
- MDN — box-shadow — Complete box-shadow reference with all parameters.
- W3C CSS Backgrounds and Borders — Official CSS box-shadow specification.
- Material Design — Elevation — Google's elevation and shadow design guidelines.
- Tailwind CSS — Box Shadow — Pre-made shadow utilities from popular CSS framework.