Shadows are one of the most powerful tools in a web designer's toolkit. A well-crafted CSS box shadow can transform a flat, lifeless element into something that feels tangible, layered, and professional. Our free online CSS box shadow generator gives you full control over every shadow parameter with a live preview — design your perfect shadow and copy the CSS code in seconds.
What Is CSS Box Shadow?
The CSS box-shadow property adds one or more shadow effects to an element. Unlike text-shadow (which only affects text), box-shadow applies to the entire element box — including its border, padding, and background. It creates the illusion of depth by simulating how light interacts with physical objects.
The box-shadow property was introduced in CSS3 and is now supported by all modern browsers with excellent compatibility. It's one of the most widely used CSS properties for creating visual hierarchy, depth, and polish in web interfaces.
Understanding the Box Shadow Syntax
The full syntax for box-shadow is:
box-shadow: [inset] [horizontal] [vertical] [blur] [spread] [color];
Let's break down each parameter:
| Parameter | Description | Default | Example |
|---|
inset | Makes the shadow appear inside the element | Outset (no inset) | inset |
horizontal | Left/right offset (negative = left) | 0 | 10px |
vertical | Top/bottom offset (negative = up) | 0 | 10px |
blur | Blur radius — higher = softer shadow | 0 | 20px |
spread | Size increase/decrease of shadow | 0 | 5px |
color | Shadow color (supports alpha) | currentColor | rgba(0,0,0,0.3) |
Pro tip: Always use rgba() for shadow colors. The alpha channel (0.0–1.0) controls transparency, which is essential for realistic-looking shadows. Pure black (#000) looks harsh and unnatural.
How to Use the Box Shadow Generator
- Open the generator — Navigate to the CSS box shadow generator.
- Adjust the sliders — Use the intuitive sliders to control horizontal offset, vertical offset, blur radius, spread radius, and opacity.
- Pick your color — Choose the shadow color with the color picker. The tool automatically generates the
rgba() value.
- Toggle inset mode — Switch between outset and inset shadows with a single click.
- Add multiple layers — Stack multiple shadows for complex effects. Each layer has its own set of parameters.
- Copy the CSS — Click the copy button to grab the ready-to-use
box-shadow CSS property.
The preview updates in real time as you adjust any parameter, so you can experiment freely until you achieve the exact look you want.
Step-by-Step Shadow Examples
Example 1: Subtle Card Elevation (Material Design Style)
Material Design uses layered shadows to communicate elevation. A card at "elevation 1" might use:
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
How to create this in the generator:
- Set horizontal offset to
0, vertical to 1px, blur to 3px, spread to 0.
- Set color to black with 12% opacity.
- Add a second layer:
0 1px 2px rgba(0, 0, 0, 0.24).
- The dual-layer approach creates a more realistic shadow than a single layer.
Example 2: Dramatic Floating Effect
For hero sections or featured elements, a larger, more dramatic shadow creates a strong sense of depth:
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.2);
Key characteristics: large vertical offset (20px), high blur (60px) for softness, and a tighter second layer (8px offset, 20px blur) for definition near the element.
Example 3: Inset Shadow for Depth
Inset shadows simulate recessed areas, like input fields or pressed buttons:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 -1px 2px rgba(255, 255, 255, 0.1);
The second layer with negative vertical offset and a light color creates a subtle highlight at the bottom, simulating light coming from above.
Example 4: Neon Glow Effect
For dark themes and creative designs, colored shadows create a neon glow:
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 60px rgba(99, 102, 241, 0.3), 0 0 100px rgba(99, 102, 241, 0.1);
Zero offset with increasing blur creates an expanding glow. Using your brand color instead of black produces a vibrant, eye-catching effect. Try our color extractor to find the perfect glow color from your brand assets.
Example 5: Multi-Layer Realistic Shadow
Real-world shadows have multiple components — a sharp contact shadow and a soft ambient shadow:
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 16px 32px rgba(0, 0, 0, 0.07),
0 32px 64px rgba(0, 0, 0, 0.07);
Each layer has progressively larger offset and blur but the same low opacity. This creates a smooth gradient from a defined edge shadow to a soft ambient shadow.
Common Use Cases
Card Components
Cards are everywhere in modern UI — product cards, profile cards, content cards. A subtle box shadow is what separates a card that looks "flat" from one that feels interactive and elevated. Use the generator to find the perfect shadow that matches your design system's elevation levels.
Buttons & Interactive Elements
Shadows communicate interactivity. Buttons with shadows appear clickable; pressing them should reduce or remove the shadow to simulate the button being pushed down. Use CSS transitions to animate the shadow change for a satisfying interaction:
.button {
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.button:active {
box-shadow: 0 1px 4px rgba(99, 102, 241, 0.4);
transform: translateY(2px);
}
Dropdown Menus & Modals
Overlays like dropdown menus, popovers, and modal dialogs need strong shadows to separate them from the background content. A well-designed shadow ensures the overlay visually "floats" above everything else.
Image Frames & Thumbnails
Adding a shadow to images creates a framed, gallery-like appearance without actual borders. This works especially well on white or light backgrounds where the shadow provides clear visual separation.
Form Inputs
Input fields with inset shadows appear recessed, making them feel like physical containers. On focus, transitioning to an outset shadow (or a colored glow) provides clear visual feedback.
Box Shadow Performance Tips
- Avoid large blur values on animated elements. Shadows with large blur radii are expensive to animate. If you need to animate shadows, use
transform: translateY() instead — it's GPU-accelerated and much smoother.
- Limit the number of layers. Each shadow layer increases rendering cost. Stick to 2–4 layers for the best balance of visual quality and performance.
- Use
will-change sparingly. If you're animating box-shadow, adding will-change: box-shadow can hint the browser to optimize, but don't overuse it.
- Consider
filter: drop-shadow() for non-rectangular shapes. The box-shadow property follows the element's rectangular box, including border-radius. For truly non-rectangular shapes (like clipped elements), use filter: drop-shadow() instead.
Box Shadow vs. Filter Drop Shadow
| Feature | box-shadow | filter: drop-shadow() |
|---|
| Shape | Rectangular (follows border-box) | Follows alpha channel |
| Inset support | Yes | No |
| Multiple layers | Yes (comma-separated) | No |
| Spread | Yes | No |
| Performance | Better (no filter chain) | Slower (triggers compositing) |
| Use case | Cards, buttons, inputs | SVGs, clipped images, icons |
Frequently Asked Questions
Does box-shadow affect layout?
No. Box-shadow is purely visual — it doesn't affect the element's dimensions, margins, or the space it occupies in the document flow. However, if you need the shadow to be visible (not clipped by a parent with overflow: hidden), make sure the parent has enough padding to accommodate the shadow's spread and blur.
Can I animate box-shadow?
Yes, but it's not recommended for performance. Animating box-shadow triggers layout recalculations on every frame. For smooth animations, use transform: translateY() to simulate elevation changes, or use a pseudo-element for the shadow and animate its opacity.
How many shadow layers can I use?
Technically, there's no limit — you can add as many comma-separated values as you want. However, for performance and visual clarity, 2–4 layers is the sweet spot. Each additional layer increases rendering cost, and beyond 4–5 layers, the visual difference becomes imperceptible.
Why does my shadow look different on different backgrounds?
Shadows are semi-transparent overlays. A shadow that looks great on a white background may be nearly invisible on a dark background, and vice versa. Always test your shadows on the actual background color they'll appear on. For dark themes, consider using lighter shadow colors instead of black.
Can I use box-shadow with border-radius?
Yes, and they work perfectly together. The shadow automatically follows the element's border-radius, creating rounded shadows that match the element's shape. This is why box-shadow is the go-to for cards, buttons, and other rounded UI elements.
Related Tools
For more CSS design resources, explore our guides on color extraction and image format conversion.