Free CSS Box Shadow Generator
Adjust sliders, pick a color, and get perfect CSS box shadow code instantly. Live preview updates as you type. Free, no sign-up required.
Build Your Box Shadow
box-shadow: 4px 8px 24px 0px rgba(0, 0, 0, 0.20);
Level Up Your Design Components
These widgets help thousands of websites look polished and convert better.
Image Hover Effects
Pair box shadows with image hover effects to create depth and dimension that draws visitors in. Zero code required.
Image Gallery
Shadowed gallery cards give images a floating, professional look. Combine custom box shadows with a polished image gallery widget.
Marketing Button
Shadow effects on CTA buttons increase perceived clickability. Design compelling call-to-action buttons with built-in hover states.
Popup Builder
Popups with layered shadows feel premium and focused. Build attention-grabbing popups that convert without any design knowledge.
Explore More Free Design Tools
Other free tools to help you design and build faster.
Free CSS Button Generator
Generate custom CSS buttons with gradients, borders, and hover effects. Copy the code instantly.
Use Tool \u2192Free Color Palette Generator
Create harmonious color palettes for your brand or design system in seconds.
Use Tool \u2192Free Favicon Generator
Create a favicon for your website from text or initials. Download as PNG in all required sizes.
Use Tool \u2192Free OG Image Generator
Generate Open Graph images for social media previews. No design skills needed.
Use Tool \u2192How It Works
How to use this free box shadow generator
No account needed, no sign-up required. Completely free. Drag the sliders, pick a color, and copy your shadow CSS in seconds.
Adjust the shadow sliders
Use the horizontal offset, vertical offset, blur radius, and spread radius sliders to shape your shadow. Values update the live preview instantly so you can see exactly what your shadow will look like in a real browser.
Pick a color and opacity
Choose any shadow color using the color picker. Control transparency with the opacity slider to create subtle shadows for cards or dramatic shadows for hero elements. The tool converts your values to rgba automatically.
Copy the CSS and paste it in
Click Copy CSS to copy the complete box-shadow property to your clipboard. Paste it directly into your stylesheet, CSS-in-JS file, or inline style. No account needed, completely free.
CSS Syntax
The CSS box-shadow property syntax
Understanding the syntax makes it easy to hand-tune shadows once you have a starting point from this free generator.
CSS Syntax
box-shadow: [inset] h-offset v-offset blur spread color;
Example: box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.12);
The h-offset and v-offset are required. All other values are optional and default to 0 or transparent if omitted. Positive h-offset moves the shadow right; positive v-offset moves it down. Negative values go left and up.
The blur radius starts from the shadow edge and blurs outward. It cannot be negative. The spread radius controls the overall size of the shadow before blurring. A spread of 0 matches the element exactly. A negative spread shrinks the shadow, which is useful for creating tight contact shadows.
You can stack multiple shadows on a single element by separating them with commas. The first shadow in the list renders on top. This technique is commonly used to create layered depth: one tight shadow near the element for contact shadow, and one distant soft shadow for ambient light.
The inset keyword, when added before the offsets, renders the shadow inside the element. Inset shadows are clipped by the element border and do not extend outside it. They are ideal for indicating focus, active, or pressed states on inputs and buttons.
Shadow Examples
Ready-to-use box shadow examples by use case
Copy any of these values directly or use them as a starting point in the generator above.
| Style Name | CSS Value | Best For |
|---|---|---|
| Subtle card lift | 0 2px 8px rgba(0,0,0,0.08) | Cards, panels, light UI elements |
| Medium depth | 0 4px 24px rgba(0,0,0,0.12) | Modals, dropdowns, popovers |
| Strong elevation | 0 8px 40px rgba(0,0,0,0.2) | Floating action buttons, headers |
| Colored glow | 0 0 20px rgba(76,79,255,0.4) | Brand highlights, CTAs, badges |
| Inset pressed | inset 0 2px 6px rgba(0,0,0,0.15) | Active inputs, pressed buttons |
| Hard edge | 4px 4px 0px rgba(0,0,0,0.85) | Retro UI, comic style, neo-brutalism |
All values are production-ready. Copy and adapt to your design system.
Browser Support
CSS box-shadow browser compatibility
Box-shadow is universally supported in all modern browsers. Here is the full compatibility breakdown for production use.
| Browser | Support Level | Since Version | Notes |
|---|---|---|---|
| Chrome | Full support | 10+ | Full support including multiple shadows |
| Firefox | Full support | 4+ | Full support including spread and inset |
| Safari | Full support | 5.1+ | Full support. Requires -webkit- prefix for Safari 3-4. |
| Edge | Full support | 12+ | All Edge versions support box-shadow fully |
| IE | Partial | IE 9+ | IE 9+ supports box-shadow. IE 8 requires filter hack. |
| iOS Safari | Full support | 5+ | Full mobile browser support |
Source: MDN Web Docs, Can I Use. Data as of 2026.
Common Mistakes
Six CSS box shadow mistakes that kill your UI polish
Most shadow problems stem from a few repeated habits. Avoiding these mistakes instantly elevates your design quality.
Using only black shadows
Pure black shadows rarely appear in real-world interfaces. They look harsh and artificial. Pick a color that is slightly tinted toward your background or brand hue. Dark navy or brown shadows read far more naturally than rgb(0,0,0).
Use rgba shadows with 10-25% opacity for realismMaking shadows too hard-edged
A blur of 0 creates a harsh, unrealistic shadow that draws attention to itself. Most UI shadows need at least 4-8px of blur to look natural. Hard shadows work for intentional neo-brutalist aesthetics only.
Aim for blur radius 2x your v-offset as a starting pointApplying the same shadow to everything
A flat design with identical shadows on all elements destroys depth hierarchy. Cards, modals, and floating buttons should have progressively larger shadows. Use 3-4 elevation levels across your UI system for visual clarity.
Define 3-4 shadow tokens in your design systemAnimating box-shadow directly
Animating box-shadow triggers layout repaints on every frame, which is expensive on mobile. Instead, animate opacity on a pseudo-element with the target shadow applied. This keeps animations on the GPU compositor.
Use opacity animation instead of box-shadow transitionsForgetting mobile dark mode
Shadows built for light mode often disappear in dark mode because dark backgrounds absorb dark shadows. Add a second shadow value with a lighter, semi-transparent color, or use CSS custom properties to swap shadow values for dark mode.
Test every shadow in both light and dark modeOverusing multiple shadow layers
Multiple stacked box shadows can create beautiful effects, but each additional shadow layer increases paint complexity. Keep layered shadows to 2-3 maximum and avoid them on elements that appear hundreds of times on a page.
Limit layered shadows to key focal elements onlyDesign Tips
8 tips to use box shadows like a pro
These techniques help you create polished, consistent depth effects across your entire site. All CommonNinja widgets mentioned are free to start.
Create depth hierarchy with elevation tokens
Define 3-4 named shadow levels (low, medium, high, overlay) and apply them consistently. This makes your UI feel cohesive and gives users clear visual cues about which elements are interactive or elevated.
Match shadow direction to your light source
Pick one consistent light source direction (top-left is most common) and apply it to all shadows. Inconsistent shadow angles across a page create subconscious visual tension that makes interfaces feel amateurish.
Add hover effects to lift interactive elements
Combine box-shadow transitions with translateY to create a natural lift effect on buttons and cards. Use CommonNinja Image Hover Effects to apply polished hover interactions without writing custom CSS.
Try Image Hover Effects Free →Use gallery shadows to frame visual content
A well-tuned card shadow on image gallery items adds polish and perceived quality. CommonNinja Image Gallery lets you display images with consistent shadow and hover behavior across your entire site.
Try Image Gallery Free →Layer two shadows for premium depth
Stack a close, sharp shadow (2px 2px 4px rgba(0,0,0,0.1)) with a distant, soft shadow (0 12px 40px rgba(0,0,0,0.08)). The combination mimics how real objects cast both a contact shadow and a distant ambient shadow.
Use colored shadows for brand moments
Swap black shadows for brand-colored glows on your most important CTAs. A blue glow on a blue button reinforces your brand identity and makes the action feel energetic rather than generic.
Shadow popup overlays for focus
Popups and modals need strong shadows to separate from the page. Use a high-spread, low-blur shadow (0 0 0 9999px rgba(0,0,0,0.5)) as a backdrop, or use CommonNinja Popup Builder for zero-code modal experiences.
Try Popup Builder Free →Define shadows as CSS custom properties
Store your shadow values in CSS variables (--shadow-md: 0 4px 24px rgba(0,0,0,0.1)) and reference them throughout your stylesheet. This makes theme switching and dark mode support trivially easy to implement.
CSS Effects Glossary
Box shadow property reference
A plain-English reference to every box-shadow parameter so you can hand-edit values confidently without a generator.
| Property | Description | Example | Required? |
|---|---|---|---|
| H-Offset | Horizontal offset moves the shadow left (negative) or right (positive) relative to the element. | box-shadow: 10px 0 ... | Required |
| V-Offset | Vertical offset moves the shadow up (negative) or down (positive) relative to the element. | box-shadow: 0 10px ... | Required |
| Blur Radius | Controls edge softness. Zero is a hard shadow. Higher values create a more diffuse, realistic shadow. | box-shadow: 0 0 20px ... | Optional |
| Spread Radius | Expands or contracts the shadow before blurring. Positive grows it, negative shrinks it below element size. | box-shadow: 0 0 0 10px ... | Optional |
| Color | Accepts any CSS color value. Use rgba for transparency control. Tinted shadows look more natural than black. | box-shadow: ... rgba(0,0,0,0.15) | Optional |
| Inset | Moves the shadow inside the element boundary, creating an inner-glow or pressed-in appearance. | box-shadow: inset 0 2px 6px ... | Optional |
From the Blog
Further reading on CSS and web design
Dig deeper into CSS techniques, design systems, and component-level styling that makes your interfaces stand out.
Understanding Responsive Web Design: The Key to User-Friendly Websites
In this article, we are going to discuss responsive design. ...
Read article →The Future of Web Design: How AI is Revolutionizing the Industry
In this article, we are going to discuss AI, how it revolutionizes the industry of web design and discuss the future of ...
Read article →How To Create Responsive Web Design Using CSS Container Queries
In this article, we’ll discuss how to create responsive web designs with CSS container queries. ...
Read article →Mobile-First Web Design Strategy: The Ultimate Guide for Beginners (Including Best Practices)
In this article, we will discuss mobile-first web design. ...
Read article →How Great Web Design Can Boost Your Sales
Discover how great web design can boost your sales through good navigation, SEO and more. ...
Read article →How Web Design Impacts User Experience and Conversions
In this article, we investigate User Experience (UX) and its interrelation with web design, including the impact on conv...
Read article →