Box Shadow Generator: Build CSS Box Shadow Values Visually
Create CSS box-shadow values visually with controls for offset, blur, spread, color, opacity, and inset — with multi-layer shadow support.
Try the free online tool
Runs entirely in your browser — no signup, no uploads.
Box shadows are one of CSS's most versatile tools for adding depth and hierarchy to user interface elements. A subtle, well-crafted shadow can make a card feel lifted off the page, a button feel pressable, or a modal feel distinct from the content behind it. Yet the box-shadow property's syntax — with five separate numeric parameters plus a color — makes it tedious to tune by hand, requiring constant trial and error in browser DevTools.
Our Box Shadow Generator lets you manipulate every shadow parameter through intuitive sliders and inputs while watching the result update live on a realistic preview element. You can add multiple shadow layers — which is key to creating the soft, natural-looking shadows seen in modern design systems — and control each layer independently.
The tool also includes a library of curated shadow presets inspired by Material Design, Apple's Human Interface Guidelines, and popular design systems. Start from a preset and fine-tune it, or build from scratch. Either way, the output is a single copy-ready CSS line that you can drop directly into your stylesheet.
What Is the CSS box-shadow Property?
The CSS box-shadow property adds one or more shadow effects to an element's box. Each shadow is defined by up to five values: horizontal offset (x), vertical offset (y), blur radius, spread radius, and color. An optional inset keyword flips the shadow from outside the element to inside it.
The horizontal and vertical offsets determine where the shadow falls relative to the element. Positive x moves the shadow right; negative x moves it left. Positive y moves it down; negative y moves it up. The blur radius controls how soft the shadow edge is — 0 creates a hard edge while larger values create a diffuse glow. The spread radius expands or contracts the shadow beyond the element's bounds.
Multiple shadows can be applied by separating them with commas. This multi-layer capability is the key to realistic shadows: real-world objects cast shadows that are sharp and dark close to the surface and soft and diffuse at a distance, which requires at least two layers to approximate in CSS.
How to Use This Tool
Design your shadow with full visual control:
- 1
Adjust the Shadow Parameters
Use the sliders for horizontal offset, vertical offset, blur radius, and spread radius. Each slider shows a live numeric value that you can also type into directly for precision.
- 2
Set the Shadow Color
Click the color swatch to open the color picker. Use the opacity slider within the picker to set the shadow's alpha channel — semi-transparent shadows look more natural than solid black ones.
- 3
Toggle Inset Mode
Enable the Inset toggle to flip the shadow inside the element. Inset shadows are useful for pressed-button states, recessed inputs, and embossed text effects.
- 4
Add Multiple Shadow Layers
Click 'Add Layer' to stack additional shadows. Select each layer in the layers panel to configure it independently. Drag layers to reorder them — CSS applies shadows in list order, front to back.
- 5
Copy the CSS
Click the Copy button to copy the complete box-shadow value to your clipboard. The output includes all layers in the correct comma-separated format.
Common Use Cases
Box shadows enhance the visual quality of interfaces across many component types:
- Elevating card components to create a sense of hierarchy and separation from the page background, with shadow depth corresponding to the card's importance
- Adding hover and focus states to interactive elements by increasing shadow size and offset on hover, reinforcing affordance and giving feedback that an element is clickable
- Creating pressed or active states for buttons by switching from an outer shadow to a small inset shadow, simulating the physical sensation of pressing a button
- Designing modal and drawer overlays with a large, soft shadow to separate them visually from the content below without relying on opacity overlays
- Crafting neumorphic and glassmorphic UI effects by combining multiple inset and outset shadows with specific color relationships to the background
Tips and Best Practices
Apply shadows effectively with these design and code guidelines:
- Use semi-transparent shadows rather than solid black — a shadow with rgba(0,0,0,0.15) looks far more natural than one with a solid grey color because real shadows let background colors influence their appearance
- For natural-looking shadows, combine a larger, more diffuse layer (high blur, low opacity) with a smaller, sharper layer (low blur, slightly higher opacity) — this approximates the way light creates both ambient and direct shadow components
- Maintain consistent light source direction across all shadows in your design — mixing shadows that fall in different directions creates visual incoherence
- Use CSS custom properties to define shadow scales (--shadow-sm, --shadow-md, --shadow-lg) so your entire design system can be tuned from one location
- Test shadows against multiple background colors — a shadow that is visible on a white background may disappear on a dark background, requiring color-scheme-specific values
Frequently Asked Questions
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow applies a shadow based on the rectangular bounding box of the element, ignoring transparent areas and irregular shapes. filter: drop-shadow() follows the actual visible shape of the element, including PNG transparency and SVG paths. Use drop-shadow for images and icons; use box-shadow for layout elements.
How do I create a shadow that appears on all sides of an element?
Set the horizontal and vertical offsets to 0 and use only blur and spread: box-shadow: 0 0 20px 5px rgba(0,0,0,0.2). This creates a glow effect that spreads uniformly in all directions. Increase spread for a larger halo or increase blur for a softer edge.
Can I animate box-shadow values?
Yes. box-shadow can be transitioned and animated because all its numeric values are interpolatable. Use transition: box-shadow 0.2s ease on the base state and define a different shadow value on the :hover or :focus state. Avoid animating large, complex multi-layer shadows at high frame rates on mobile, as it can impact performance.
What does a negative spread radius do?
A negative spread radius shrinks the shadow smaller than the element itself. This is useful for creating shadows that appear only below or on one side of an element without wrapping around the visible edges. It is a common technique for bottom-only shadows on navigation bars.
How do I make a text-shadow using this tool?
This tool generates box-shadow values for element boxes. For text shadows, use the CSS text-shadow property, which has a similar syntax but without the spread parameter: text-shadow: 2px 2px 4px rgba(0,0,0,0.5). A dedicated text-shadow generator is available in the CSS tools section.
Why does my box-shadow not show on overflow: hidden containers?
box-shadow is rendered outside the element's box and is clipped by overflow: hidden on the parent element. To show shadows while also hiding overflow content, apply overflow: hidden to an inner wrapper and box-shadow to an outer wrapper, keeping the shadow outside the clipped area.
Does box-shadow affect layout?
No. box-shadow does not affect layout — it does not push other elements away or take up space in the document flow. This is one of its advantages over solutions like outline or border. If you need the shadow to affect layout, you would need to use padding or margin instead.
Ready to use this tool?
Free, instant, no account required. Runs entirely in your browser.