A box shadow generator lets you create CSS box-shadow effects visually — adjusting offset, blur, spread, and color — without writing CSS from scratch. Shadows add depth, hierarchy, and polish to cards, buttons, modals, and navigation.
Generate CSS Box Shadows Visually
Adjust sliders, layer shadows, and copy CSS. Real-time preview.
Box Shadow Anatomy: The 5 Values
box-shadow: offset-x offset-y blur spread color;
box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.15);| Value | What It Does | Typical Range |
|---|---|---|
| offset-x | Horizontal distance | 0-20px |
| offset-y | Vertical distance | 1-20px |
| blur | Softness of edge | 4-40px |
| spread | Size expansion | -10 to 10px |
| color | Shadow color + opacity | rgba(0,0,0,0.05-0.25) |
The most common mistake is making shadows too dark and too large. Professional UI shadows use rgba(0,0,0,0.05-0.15) — barely visible but creating clear depth. Compare Tailwind CSS shadows: they use 0.05-0.1 opacity.
Layered Shadows for Realistic Depth
Real-world objects cast multiple shadow layers. Using 2-3 layered shadows creates much more realistic depth than a single shadow:
/* Single shadow (flat) */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
/* Layered shadow (realistic) */
box-shadow:
0 1px 2px rgba(0,0,0,0.06),
0 4px 6px rgba(0,0,0,0.1);
/* Elevated card (Material-like) */
box-shadow:
0 1px 3px rgba(0,0,0,0.12),
0 4px 8px rgba(0,0,0,0.06),
0 12px 24px rgba(0,0,0,0.04);Common Shadow Patterns
| Pattern | CSS | Use For |
|---|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.1) | Cards, panels |
| Medium elevation | 0 4px 12px rgba(0,0,0,0.15) | Dropdowns, popovers |
| High elevation | 0 12px 40px rgba(0,0,0,0.2) | Modals, dialogs |
| Inset | inset 0 2px 4px rgba(0,0,0,0.1) | Input fields, pressed buttons |
| Glow | 0 0 20px rgba(59,130,246,0.4) | Focus rings, highlights |
Shadows in Dark Mode
Standard black shadows are invisible on dark backgrounds. Options:
- Darker shadows — rgba(0,0,0,0.3-0.5) on dark backgrounds
- Border instead — 1px border with rgba(255,255,255,0.1) for subtle separation
- Ambient glow — Use brand color at low opacity: 0 0 20px rgba(59,130,246,0.15)
- Inset highlights — inset 0 1px 0 rgba(255,255,255,0.05) creates a top-edge highlight
Shadow Performance Tips
- box-shadow triggers repaint — animating it is expensive. Use transform + opacity for animations instead.
- filter: drop-shadow() — follows element shape (works on PNGs with transparency). More expensive than box-shadow.
- will-change: transform — hint for GPU acceleration on shadow-heavy elements
- Reduce shadow count on mobile — fewer layers = better performance on low-end devices
Tailwind CSS Shadow Utilities
Tailwind provides pre-defined shadow classes that follow best practices:
| Class | CSS Value | Use For |
|---|---|---|
| shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle card edges |
| shadow | 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) | Default cards |
| shadow-md | 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) | Elevated cards, dropdowns |
| shadow-lg | 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) | Modals, floating elements |
| shadow-xl | 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04) | Large dialogs |
| shadow-2xl | 0 25px 50px rgba(0,0,0,0.25) | Full-screen overlays |
A common pattern: shadow-md hover:shadow-lg transition-shadow — cards lift on hover, providing visual feedback. This is more performant than animating box-shadow directly because Tailwind's transition only triggers on state change.
How to Use the Tool (Step by Step)
- 1
Open the Generator
Navigate to Box Shadow Generator on ToolsArena.
- 2
Adjust Sliders
Set offset-x, offset-y, blur, spread, and color visually.
- 3
Add Layers
Add multiple shadow layers for realistic depth.
- 4
Copy CSS
Copy the generated box-shadow CSS.
Frequently Asked Questions
What is box-shadow in CSS?+−
box-shadow adds shadow effects to elements. Syntax: box-shadow: offset-x offset-y blur spread color. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15) creates a soft shadow below the element.
How do I make shadows look realistic?+−
Use multiple layered shadows with different blur and opacity values instead of a single shadow. Professional UI uses 2-3 layers with very low opacity (0.05-0.15).
How do shadows work in dark mode?+−
Black shadows are invisible on dark backgrounds. Use darker opacity (0.3-0.5), borders, or brand-colored glows instead.
What is inset shadow?+−
Adding "inset" makes the shadow appear inside the element instead of outside. Used for pressed buttons and input fields: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1).
Do shadows affect performance?+−
Yes. box-shadow triggers repaints. Avoid animating box-shadow directly — animate transform/opacity and use will-change: transform for GPU acceleration.
Is this tool free?+−
Yes. Generate unlimited shadows in your browser. Copy CSS instantly.
Generate CSS Box Shadows Visually
Adjust sliders, layer shadows, and copy CSS. Real-time preview.
Open Box Shadow Generator →Related Guides
Linear vs Radial vs Conic Gradients in CSS
Generate linear, radial, and conic CSS gradients visually — copy the code and use it instantly in your projects.
CSS justify-content vs align-items
Build CSS Flexbox layouts visually. Understand flex-direction, justify-content, align-items, flex-wrap, gap, and responsive patterns with live preview.
How to Choose a Color Palette
Learn color theory, palette types, accessibility contrast rules, and how to generate harmonious color palettes for web design, branding, and UI.