CSS Box Shadow Generator

Presets

Layers

Type

Outset casts the shadow outside the element. Inset renders it inside, creating a sunken look.

Horizontal Offset

Moves the shadow left (negative) or right (positive) relative to the element.

0px

Vertical Offset

Moves the shadow up (negative) or down (positive) relative to the element.

4px

Blur Radius

Higher values make the shadow softer and more diffused. Zero produces a sharp, hard edge.

20px

Spread Radius

Expands (positive) or shrinks (negative) the shadow size before blur is applied.

0px

Color

The base color of the shadow. Use the opacity slider below to control transparency.

Opacity

Controls the shadow's transparency. Output uses rgba() so the element's background shows through.

20%

Canvas:

Box:

-webkit- Minify

This CSS Box Shadow Generator is a free, browser-based tool that lets you build and export box shadows visually, without writing a single line of code.

Drag a slider and the preview updates instantly. Every property is right in front of you.

What you can control:

Horizontal and vertical offset
Blur and spread radius
Shadow color and opacity
Inset or outset direction

Stack multiple shadow layers for complex effects. Not sure where to start? Pick one of the 8 built-in presets like Soft Lift, Neon Glow, or Retro, then tweak from there.

The preview box is flexible too. Switch between rounded, square, circle, and card shapes. Change the box color and canvas background to match your actual design context.

When you're done, export in the format you need:

Plain CSS
A CSS custom property (--shadow: ...)
A Tailwind config entry
A React inline style object

Minify the output or keep it readable. Add the -webkit- prefix with one click. Copy and paste directly into your project.

No sign-up. No ads. Just a fast, clean tool that gets out of your way.

What is CSS Box Shadow

The box-shadow CSS property adds one or more shadow effects around an HTML element's frame.

It doesn't change the element's size or position. The shadow renders outside the box model, so it never pushes other elements around.

CSS uses six values to define a shadow: horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword.

How the CSS Box Shadow Generator Works

The generator gives you real-time visual feedback as you adjust each shadow parameter.

Change a slider, the preview updates instantly. No need to write or test the box-shadow syntax manually.

Once the shadow looks right, copy the generated CSS code and paste it directly into your stylesheet.

How to Set Horizontal and Vertical Offset

Horizontal offset moves the shadow left (negative) or right (positive). Vertical offset moves it up (negative) or down (positive).

Both accept any integer. Zero on both axes places the shadow directly behind the element.

How to Adjust Blur Radius

Controls how soft the shadow edge is. Zero gives a hard edge. Higher values spread the blur further.

Negative values aren't allowed here.

How to Control Spread Radius

A positive value expands the shadow beyond the element's dimensions. A negative value shrinks it.

Set spread to 0 to match the element size exactly.

How to Change Shadow Color and Opacity

Use any valid CSS color format: hex, rgb, rgba, hsl, or hsla.

RGBA is the most practical choice - the alpha channel controls shadow opacity directly without extra properties.

How to Switch Between Inset and Outset Shadow

By default, shadows render outside the element (outset). Check the inset option to flip it inside the element's frame.

Inset shadows work well on input fields and pressed-button states.

CSS Box Shadow Syntax and Parameters

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

Only offset-x, offset-y, and color are required. The rest default to 0.

Multiple shadows stack with commas - the first shadow listed renders on top.

What Does a Negative Offset Do

A negative offset-x shifts the shadow to the left. A negative offset-y shifts it above the element.

Useful for directional lighting effects or top-edge emphasis.

What Happens When Blur Radius is 0

The shadow renders with a fully sharp edge. No softness, no feathering.

Works well for flat UI styles or hard drop shadows used in retro and brutalist design.

Spread Radius vs. Blur Radius: What's the Difference

Blur radius controls softness. Spread radius controls size.

A shadow can be sharp and large (high spread, zero blur) or soft and contained (high blur, negative spread). They're independent.

How the Inset Keyword Changes Shadow Behavior

Without inset, the shadow falls outside the element. With it, the shadow renders inside the border, on top of the background.

The color and blur still work the same way - only the direction changes.

How to Add Multiple Box Shadows in CSS

Separate each shadow definition with a comma:

box-shadow: 2px 2px 6px rgba(0,0,0,0.2), -2px -2px 6px rgba(255,255,255,0.6);

The first value in the list sits on top visually. This matters when shadows overlap.

Too many stacked shadows can slow down paint performance, especially during CSS transitions. Two to three layers is usually enough for any realistic depth effect.

Layering Shadows for Depth Effects

Combine a dark outer shadow with a lighter inner shadow to fake elevation. Common in neumorphic design.

One shadow rarely looks convincing. Two or three with different offsets and opacities create a far more natural result.

How Shadow Order Affects the Visual Output

Shadows render front to back based on list order. The first one is always on top.

Swap the order and you'll notice the difference most when shadow colors overlap or blend.

CSS Box Shadow Examples by Use Case

Real patterns developers actually use - not just playground demos.

Box Shadow for Cards

box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);

Two layers: one for the main elevation, one tight shadow near the base. Gives CSS cards a grounded, realistic look.

Box Shadow for Buttons (Normal and Hover States)

/* Default */
box-shadow: 0 2px 4px rgba(0,0,0,0.15);

/* Hover */
box-shadow: 0 6px 12px rgba(0,0,0,0.2);

Increasing the shadow on hover creates a lift effect. Pair with a transform: translateY(-2px) for extra polish. See more CSS hover effects worth combining with shadows.

Inset Shadow for Input Fields

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Makes the field look recessed. Subtle, but it signals "type here" without any extra styling. Pairs naturally with CSS forms.

Neumorphism Shadow Effect

box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;

Two shadows, opposite directions, matched to the background color. The background must be a mid-tone - this technique breaks on pure white or black. Learn more about what neumorphism actually is before using it in production.

Soft Drop Shadow for Images

box-shadow: 0 8px 30px rgba(0,0,0,0.12);

High blur, low spread, subtle opacity. Lifts images off the page without drawing attention to the shadow itself.

Hard Shadow (No Blur) for Flat Design

box-shadow: 4px 4px 0px #000000;

Zero blur, solid color. Common in minimalist web design and illustration-heavy UIs. Looks intentional only when the rest of the design matches the aesthetic.

CSS Box Shadow and Browser Compatibility

box-shadow has full support across all modern browsers. No vendor prefixes needed in 2024.

The old -webkit-box-shadow prefix was required for Safari 3 and Chrome 1. Both dropped the requirement years ago.

If you're still seeing it in codebases, it's legacy code. Safe to remove.

CSS Box Shadow vs. Drop Shadow Filter

Two different properties. Different behavior, different use cases.

box-shadow follows the element's rectangular frame - always. filter: drop-shadow() follows the actual visible shape, including transparent areas in PNGs and irregular SVG outlines.

/* Follows the box */
box-shadow: 4px 4px 10px rgba(0,0,0,0.3);

/* Follows the shape */
filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.3));

Use box-shadow for UI elements like cards, buttons, and modals. Use drop-shadow when the element has transparency and the shadow needs to trace its real silhouette.

Performance note: drop-shadow via the filter property can be GPU-accelerated in most browsers, but Safari has historically struggled with it on elements containing text inputs.

CSS Box Shadow Performance

Box shadows trigger the browser's paint step. They don't affect layout, but they do get repainted when animated.

Animating box-shadow directly causes a repaint on every frame. That's expensive.

The Opacity Trick for Smooth Animation

Instead of animating the shadow directly, create two shadow states and transition between them using opacity on a pseudo-element:

.card::after {
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::after {
  opacity: 1;
}

The opacity property is composited by the GPU. No repaint. Smooth 60fps on nearly every device.

When Box Shadows Cause Visible Slowdowns

Large spread values on many elements simultaneously. Shadows inside CSS scroll containers. Shadows animated without the opacity workaround.

If your page feels sluggish on mobile, shadows are one of the first things worth profiling in Chrome DevTools.

How to Animate CSS Box Shadow

Direct animation of box-shadow works but isn't performant. The pseudo-element opacity method (above) is the better default.

For simple hover states where performance isn't critical, a CSS transition is fine:

.button {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: box-shadow 0.25s ease;
}

.button:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

Pair this with CSS keyframes if you need a looping shadow pulse - useful for drawing attention to a call-to-action button without JavaScript.

Common CSS Box Shadow Mistakes

Shadows Getting Clipped by overflow: hidden

overflow: hidden on a parent element will clip any box shadow on a child. Not a bug - that's how it works.

Move the shadow to the parent, or remove overflow: hidden from the container.

Why rgba Opacity Matters More Than You Think

A fully opaque black shadow (box-shadow: 4px 4px 8px #000) looks harsh on any background that isn't pure white.

Always use rgba with a low alpha value. Even rgba(0,0,0,0.15) produces a far more natural result than any solid color.

Shadows on border-box vs. content-box

box-shadow respects the element's border, not just its content area. The shadow renders from the outer edge of the border.

If your element has a thick border, the shadow origin shifts accordingly. Account for this when matching shadow positions to a design file.

Forgetting Shadows in Dark Mode

A shadow using rgba(0,0,0,0.2) becomes nearly invisible on dark backgrounds. Dark mode needs lighter, lower-opacity shadows - or no shadow at all, replaced by subtle border or glow effects.

Check your shadow values when implementing a dark color scheme. It's one of those things that looks fine in light mode and completely breaks in dark mode.

Related CSS Tools

Need to go further than shadows? These tools cover the adjacent properties you'll reach for next.

CSS Border Radius Generator - round corners on the same element your shadow is applied to
CSS Gradient Generator - background gradients for cards and containers that use shadow for depth
CSS Button Generator - full button styling including shadow, hover state, and border radius
CSS Text Shadow Generator - the text-shadow equivalent for typography
CSS Animation Generator - build keyframe animations including shadow transitions
CSS Color Filter Generator - the filter property, which includes drop-shadow()
CSS glassmorphism generator - blur + transparency effects that commonly pair with soft outer shadows
CSS shadow effects - a broader collection of shadow patterns and creative CSS shadow techniques

FAQ on CSS Box Shadow Generators

What is a CSS box shadow generator?

A CSS box shadow generator is an online tool that lets you set shadow values visually and outputs ready-to-use box-shadow CSS code.

No manual syntax needed. Adjust the sliders, copy the result.

What does the blur radius do in a box shadow?

Blur radius controls edge softness. A value of 0 gives a sharp, hard shadow. Higher values spread and soften the shadow outward.

It doesn't affect the shadow's size - that's what spread radius is for.

What is the difference between inset and outset box shadow?

The default (outset) renders the shadow outside the element's frame. The inset keyword flips it inside, making the element look recessed or pressed.

Both use the same offset, blur, spread, and color values.

Can I add multiple box shadows to one element?

Yes. Separate each shadow with a comma inside the box-shadow property.

The first shadow listed renders on top. Layering two or three shadows with different opacities produces more realistic depth than a single shadow.

Why is my box shadow being clipped?

A parent element with overflow: hidden clips shadows on child elements.

Move the shadow to the parent, or remove overflow: hidden from the containing element.

Does box-shadow affect page layout or element size?

No. The shadow renders outside the box model entirely.

It doesn't push other elements, increase the element's dimensions, or trigger layout recalculation. Only the paint step is affected.

What color format should I use for box shadow?

rgba() is the most practical choice. The alpha channel gives you direct control over shadow opacity without extra properties.

Solid hex colors work, but they often look too harsh - especially on non-white backgrounds.

Is box-shadow bad for performance?

It can be, when animated directly. Each frame triggers a repaint.

The fix: animate opacity on a pseudo-element holding the shadow instead. That runs on the GPU and stays smooth, even on lower-end mobile devices.

Do I still need vendor prefixes for box-shadow?

No. Full browser support has been standard for years.

The old -webkit-box-shadow prefix covered Safari 3 and early Chrome. Both dropped the requirement long ago. Removing it from existing code is safe.

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow always follows the element's rectangular frame. filter: drop-shadow() follows the actual visible shape, tracing transparency in PNGs and irregular SVG outlines.

Use drop-shadow when the element has transparent areas and the shadow needs to match its real silhouette.