Create CSS box-shadow effects visually with live preview. Multi-layer shadows, neumorphism, material design presets, and instant Tailwind CSS output.
🎭 Open Box Shadow GeneratorFree · No signup · Live preview · Tailwind output
The CSS box-shadow property adds one or more shadow effects around an element. It is one of the most powerful CSS properties for creating depth, elevation, and visual hierarchy — from subtle card shadows to dramatic colored glows and neumorphic designs. Getting shadows right is the difference between a design that looks flat and one that feels polished and real.
The ToolForge CSS Box Shadow Generator lets you build multi-layer shadows visually with live preview. Adjust offsets, blur, spread, color, and opacity in real-time, then copy the result as standard CSS or a Tailwind CSS arbitrary value class — no manual guessing required.
Up to 5 shadow layers with independent controls
X offset, Y offset, blur, spread, color, and opacity per layer
Inset shadow toggle per layer
10 one-click presets: Subtle, Medium, Heavy, Sharp, Neumorphism (light/dark), Material 1–3, Colored Glow, Embossed
Live preview card with configurable background (light/dark/checkered)
Card border-radius and background color controls
Standard CSS output: box-shadow property value
Tailwind CSS arbitrary value output
Full CSS rule output (.element { ... })
One-click copy for each output format
Click any preset button (Subtle, Medium, Neumorphism Light, etc.) to instantly load a shadow configuration. Or start with the default single-layer shadow and adjust the sliders manually.
Use the X Offset and Y Offset sliders to position the shadow. Increase Blur Radius for a softer, more spread-out shadow. Use Spread Radius to expand (+) or shrink (-) the shadow's size. Pick a color using the color picker and set opacity with the opacity slider.
Check the Inset toggle to make a shadow appear inside the element rather than outside. Inset shadows create a pressed or recessed effect — great for input fields, pressed buttons, and embossed designs.
Click "Add Layer" to add a second shadow. Each layer is independent. Multi-layer shadows create more realistic depth by combining a tight, dark shadow with a wider, lighter ambient shadow.
Set the preview card's background color and border-radius to match your actual design. Toggle the preview background between light, dark, and checkered to see how the shadow looks in different contexts.
Copy the CSS property value for use in a stylesheet, the Tailwind arbitrary value class for use in a className attribute, or the full CSS rule with the .element selector.
box-shadow: [inset] offset-x offset-y [blur] [spread] color;
inset — Optional. Makes the shadow appear inside the element.
offset-x — Horizontal offset. Positive moves right, negative moves left.
offset-y — Vertical offset. Positive moves down, negative moves up.
blur — Optional. Blur radius. 0 = sharp shadow, higher = softer.
spread — Optional. Positive expands the shadow, negative shrinks it.
color — Shadow color. Use rgba() for transparency control.
Subtle card shadow
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
Sharp drop shadow
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
Inset (pressed effect)
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
Neumorphism (light bg)
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
Colored glow
box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.5);
Tailwind includes built-in shadow utilities (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl) and the inner shadow (shadow-inner). For custom shadows beyond these presets, use arbitrary values:
<!-- Built-in --> <div class="shadow-lg">...</div> <!-- Arbitrary value (spaces become underscores) --> <div class="shadow-[0_4px_16px_rgba(0,0,0,0.15)]">...</div> <!-- Inset --> <div class="shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]">...</div>
| Use Case | Recommended Preset |
|---|---|
| Card or panel shadow | Medium — 0px 4px 16px rgba(0,0,0,0.15) |
| Subtle navbar shadow | Subtle — 0px 2px 8px rgba(0,0,0,0.08) |
| Floating action button | Heavy — 0px 10px 40px rgba(0,0,0,0.30) |
| Sharp offset design | Sharp — 4px 4px 0px rgba(0,0,0,0.25) |
| Neumorphic UI element | Neumorphism Light or Dark |
| Material design card | Material 1 or Material 3 |
| Brand-colored glow | Colored Glow — customize the color |
| Input field (focused state) | Embossed or small inset shadow |
Keep shadow opacity between 5–20% for professional, subtle results. High-opacity shadows look heavy and artificial.
Use two layers for realistic depth: a tight, darker shadow close to the element and a wider, lighter ambient shadow.
Match your shadow color to your brand accent for colored glows — replace black with your primary color at low opacity.
Neumorphism only works when the element and background share the same color. Use the card background color picker to match.
Avoid animating box-shadow for hover effects — animate transform: translateY(-2px) instead for better GPU performance.
Design systems should use shadow tokens: --shadow-sm, --shadow-md, --shadow-lg. Define once, apply everywhere for consistency.
Use the "checkered" preview background when designing shadows with colored or transparent backgrounds.
CSS box-shadow adds shadow effects around an HTML element's frame. It is defined by horizontal offset (X), vertical offset (Y), blur radius, spread radius, color, and an optional inset keyword. Box shadows do not affect layout — they are purely visual and do not change the element's size or position.
Yes. CSS supports multiple comma-separated box-shadow values on a single element. Multiple layers create more realistic depth. For example, combining a tight shadow with low blur and a wider shadow with high blur mimics natural light more accurately than a single shadow.
Neumorphism (new skeuomorphism) is a design style where elements appear to extrude from the background using two shadows — a light shadow on one side and a dark shadow on the other. It creates a soft, embossed look. This generator includes neumorphism presets for both light and dark backgrounds.
Add the inset keyword before the shadow values: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1). Inset shadows appear inside the element instead of outside, creating a pressed or sunken effect. They are commonly used for input fields, buttons in active/pressed states, and card footers.
Simple box shadows have minimal performance impact on modern browsers. However, avoid animating box-shadow directly (it triggers paint operations on every frame). Instead, animate opacity or transform on a pseudo-element that has the shadow. For design systems, define shadow tokens (shadow-sm, shadow-md, shadow-lg) and apply them as classes rather than computing shadows dynamically.
Visual editor · Live preview · Tailwind output · Free
Open Box Shadow GeneratorWorking on your page's social sharing? Generate Open Graph and Twitter Card tags with our Meta Tag Generator.