Use this free online Box Shadow Generator directly in your browser. No signup required, no data leaves your device. Part of Utilier — a collection of 133+ developer utilities.
What is CSS Box Shadow Generator?
CSS box-shadow adds shadow effects to HTML elements (divs, cards, buttons, images). This tool generates box-shadow CSS code visually — adjust horizontal and vertical offset, blur radius, spread radius, shadow color, and opacity using sliders and color pickers. See the shadow rendered in real-time and copy the CSS for use in your projects. Supports multiple layered shadows and inset shadows (inner shadows).
Offset control: Set horizontal (X) and vertical (Y) offset in pixels. Positive X moves shadow right, negative left. Positive Y moves down, negative up.
Blur radius: Controls shadow softness. 0 = sharp, hard edge. Higher values (10px, 20px) = softer, more diffused shadow.
Spread radius: Expands or contracts shadow size. Positive = larger shadow, negative = smaller shadow. Used for solid shadows or glow effects.
Color and opacity: Set shadow color (hex, RGB, RGBA). Adjust opacity (alpha) for subtle or dramatic shadows. Black with 50% opacity is common.
Multiple shadows: Layer multiple shadows separated by commas. Create depth with light and dark shadows at different offsets.
Why use box-shadow generator?
Writing box-shadow CSS manually requires trial-and-error for offset, blur, and spread values. This tool makes shadow creation visual and instant.
Visual design: Use sliders and color pickers instead of typing pixel values and hex codes. See results immediately.
Save time: No need to refresh the browser repeatedly to tweak shadow values. Adjust in real-time and copy the final CSS.
Learn box-shadow syntax: See how offset, blur, spread, and color parameters translate to CSS code. Great for learning shadow syntax.
Complex shadows made easy: Multi-layer shadows with different colors and offsets are tedious to code manually. The tool handles the syntax automatically.
Browser compatibility: Generates modern CSS box-shadow supported by all browsers (Chrome, Firefox, Safari, Edge). IE9+ supports box-shadow.
Reusable code: Copy the CSS and use it on cards, buttons, modals, images, or any element. Works universally.
When to use box-shadow generator
Use whenever you need shadow effects on UI elements.
Adding depth to cards (blog post cards, product cards, dashboards).
Creating elevated buttons with subtle shadows for 3D effect.
Designing modal dialogs or popups with shadows to separate them from the page.
Adding drop shadows to images or avatars for polish.
Creating inset shadows for input fields (pressed/recessed effect).
Layering shadows for realistic depth (material design, neumorphism).
Learning CSS shadow syntax by experimenting with offset, blur, and spread.
Set horizontal offset (X): Adjust the slider or enter a value in pixels. Positive = shadow to the right, negative = shadow to the left. 0 = centered horizontally.
Set vertical offset (Y): Positive = shadow below the element, negative = shadow above. 0 = centered vertically. Common: 2-5px for subtle shadows.
Adjust blur radius: 0 = sharp shadow edge. 5-10px = soft shadow. 20-30px = very diffused shadow. Blur creates the 'softness' of the shadow.
Adjust spread radius (optional): Positive = shadow expands (larger). Negative = shadow contracts (smaller). 0 = no spread. Use for glow effects or solid shadows.
Set shadow color and opacity: Choose a color (black, gray, brand color). Adjust opacity (alpha) for transparency. Common: rgba(0,0,0,0.1) = 10% black (subtle shadow).
Add inset (optional): Check 'Inset' to create an inner shadow (recessed effect). Common for input fields or pressed buttons.
Copy CSS code: Click 'Copy CSS' to get the box-shadow code. Paste into your stylesheet or inline style.
Key features
Offset control (X, Y): Adjust horizontal and vertical shadow position with sliders or numeric input.
Blur radius: Control shadow softness (0 = sharp, 20px = soft blur).
Separate shadows with commas. Example: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); Layers shadows for depth.
Browser support
All modern browsers (Chrome, Firefox, Safari, Edge). IE9+ supports box-shadow. IE8 does not (use CSS3Pie polyfill or skip shadows).
Comparison to text-shadow
box-shadow applies to elements (divs, buttons). text-shadow applies to text. Syntax is similar but text-shadow has no spread or inset.
Common mistakes to avoid
Using very large blur values (50px+) on every element, causing performance issues
Why it happens: Box-shadow with high blur radius is computationally expensive for browsers to render, especially on large elements or when many elements have shadows. On low-end devices or when used excessively (hundreds of shadowed elements), it causes jank (dropped frames) during scrolling or animations. Blur requires real-time Gaussian blur calculations, which are GPU-intensive.
How to avoid it: Keep blur radius reasonable (5-15px for most shadows). For heavy shadows (20-30px blur), use sparingly on key elements (hero images, modals). Avoid shadows on list items with hundreds of entries. For performance-critical animations, animate opacity or transform instead of animating box-shadow.
Forgetting to set opacity/alpha, using solid black shadows that look harsh
Why it happens: box-shadow: 0 2px 4px #000 (solid black) creates a very dark, harsh shadow. Real-world shadows are semi-transparent — light diffuses and shadows are soft. Solid black shadows look unnatural and create too much contrast. This is common for beginners who use hex colors without alpha.
How to avoid it: Always use RGBA or HSLA with alpha (transparency). Common: rgba(0,0,0,0.1) = 10% black (subtle), rgba(0,0,0,0.2) = 20% (moderate), rgba(0,0,0,0.5) = 50% (strong). For colored shadows, use the color with 20-50% opacity: rgba(59,130,246,0.3).
Applying inset shadows to elements with no background, making shadows invisible
Why it happens: Inset shadows are inside the element's borders. If the element has no background (background: transparent or no background set), the inset shadow is not visible because there is nothing for it to cast on. This is common when adding inset shadows to containers or wrappers without backgrounds.
How to avoid it: For inset shadows to be visible, the element must have a background color (background: white, background: #f0f0f0). Transparent backgrounds do not show inset shadows. Check the element's background before adding inset.
Using negative blur radius, causing CSS to fail silently
Why it happens: Blur radius must be >= 0. Negative blur is invalid and causes the entire box-shadow declaration to be ignored (CSS fails silently). The element has no shadow at all. This happens when using calc() or dynamic values that result in negative numbers: box-shadow: 0 0 calc(10px - 20px) rgba(0,0,0,0.2); (invalid).
How to avoid it: Ensure blur radius is always >= 0. Use max(0, value) in calc() to clamp to 0: box-shadow: 0 0 max(0, calc(10px - 20px)) rgba(0,0,0,0.2);. Or validate values in JavaScript before applying.
Not testing shadows on different backgrounds, causing visibility issues
Why it happens: A shadow designed on a white background may be invisible on a dark background. box-shadow: 0 2px 4px rgba(0,0,0,0.1); (10% black) is subtle on white but invisible on black. If your design has dark mode or variable backgrounds, shadows may disappear or look wrong.
How to avoid it: Test shadows on both light and dark backgrounds. For dark mode, invert shadows: use light shadows (rgba(255,255,255,0.1)) instead of dark. Or use CSS variables: --shadow-color: rgba(0,0,0,0.1); (light mode) and --shadow-color: rgba(255,255,255,0.1); (dark mode).
Frequently asked questions
What is the difference between box-shadow and drop-shadow filter?
box-shadow applies to the element's box (rectangular border-box). drop-shadow (CSS filter) applies to the element's shape (respects transparency, follows PNG outlines). Use box-shadow for rectangles, drop-shadow for irregular shapes or transparent PNGs.
How do I create a shadow that only shows on one side (bottom, right, etc.)?
Use offset and no blur/spread. For bottom-only shadow: box-shadow: 0 5px 0 0 rgba(0,0,0,0.1); (offset-y = 5px, blur = 0). For right-only: box-shadow: 5px 0 0 0 rgba(0,0,0,0.1); Zero blur keeps shadow sharp and directional.
Can I animate box-shadow on hover?
Yes. Use CSS transition: box-shadow 0.3s ease; Then change box-shadow on :hover. Example: box-shadow: 0 2px 4px rgba(0,0,0,0.1); (default), box-shadow: 0 8px 16px rgba(0,0,0,0.2); (hover). Note: animating box-shadow can be slow on low-end devices.
What is an inset shadow?
An inset shadow is inside the element (inner shadow), creating a recessed or pressed-in effect. Add the 'inset' keyword: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); Common for input fields, disabled buttons, or card indents.
How do I create a glow effect with box-shadow?
Use zero offset, high blur, and spread. Example: box-shadow: 0 0 20px 5px rgba(59,130,246,0.5); (blue glow). No offset (0,0) centers the glow. High blur (20px) + spread (5px) creates a halo. Use brand colors for accent glows.
Why is my box-shadow not showing?
Check: 1) Element has width/height (no size = no shadow). 2) Blur radius is not negative (must be >= 0). 3) Color has opacity > 0 (rgba(0,0,0,0) = transparent). 4) Shadow is not behind the element (increase z-index or use positive offsets). 5) Inset shadow requires a background color.
What are common box-shadow values for material design?
Material Design uses layered shadows for depth. Elevation 1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Elevation 2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23). Higher elevation = more offset and blur. See Material Design shadow specs.