CSS Box Shadow Generator

What is CSS Box Shadow?

The CSS box-shadow property adds one or more shadow effects around an element's frame. It is one of the most commonly used CSS properties for creating depth, elevation, and visual hierarchy in modern web interfaces, from subtle card shadows to dramatic glow effects.

Unlike text-shadow, box shadows wrap the entire element box. You can layer multiple shadows by separating them with commas, which allows complex lighting effects from a single CSS property.

Box Shadow Syntax

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

• offset-x: Horizontal distance. Positive moves shadow right, negative moves left.
• offset-y: Vertical distance. Positive moves shadow down, negative moves up.
• blur-radius: How soft the shadow edge is. 0 = sharp edge. Higher = more blur.
• spread-radius: Positive expands shadow size. Negative shrinks it.
• color: Shadow color. Use rgba() to control transparency.
• inset: Optional keyword. Makes shadow appear inside the element instead of outside.

Box Shadow Parameters at a Glance

Parameter	Controls in this generator	Required
offset-x	Horizontal Offset slider	Yes
offset-y	Vertical Offset slider	Yes
blur-radius	Blur Radius slider	No, defaults to 0
spread-radius	Spread Radius slider	No, defaults to 0
color	Shadow Color picker + Opacity slider	No, defaults to black
inset	Inset shadow checkbox	No, defaults to outer shadow

Common Box Shadow Examples

Subtle Card Shadow

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

Medium Drop Shadow

box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);

Colored Glow Effect

box-shadow: 0 0 12px 3px rgba(124, 106, 247, 0.5);

Inset Shadow (Inner Shadow)

box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);

Layered Multi-Shadow

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.15);

Box Shadow on Only One Side (Top, Bottom, or Side Only)

A common request is a shadow that appears on only one edge of an element, for example a bottom-only shadow under a header or a top-only shadow above a footer, instead of a shadow that surrounds the whole box. The trick is to set a negative spread radius roughly equal to the blur radius, then use the offset to push the shadow to the side you want.

Bottom-Only Shadow

box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

Top-Only Shadow

box-shadow: 0 -8px 6px -6px rgba(0, 0, 0, 0.3);

Right-Side-Only Shadow

box-shadow: 8px 0 6px -6px rgba(0, 0, 0, 0.3);

In this generator, set the Vertical Offset (or Horizontal Offset for a side shadow) to your desired distance, then drag Spread Radius negative until it roughly matches the Blur Radius value. The shadow will tuck in on three sides and only show on the one edge you offset toward.

When to Use Box Shadow

• Cards and panels: A soft shadow at 0 offset with moderate blur creates a floating card effect.
• Buttons: A directional shadow adds a 3D pressed/unpressed state on hover.
• Form inputs: Inset shadows simulate depth inside the input field.
• Modals and dropdowns: Strong shadows anchor overlapping UI to the page.
• Focus states: Colored glow shadows replace or supplement outline for accessibility.

Box Shadow vs Outline vs Filter Drop Shadow

• box-shadow: Follows the rectangular box of the element. Does not affect layout. Clipped by overflow: hidden on parent elements.
• outline: Also follows the box, but renders outside the border. Cannot be blurred. Used primarily for accessibility focus rings.
• filter: drop-shadow(): Follows the actual visible shape of the element, including transparent areas. Useful for irregular shapes, PNG images, and SVGs.

Box Shadow with Tailwind CSS

Tailwind CSS ships preset shadow utilities, shadow-2xs through shadow-2xl, plus inset-shadow-* for inner shadows in Tailwind v4 (v3 uses shadow-inner). None of the presets will match a shadow you dial in here exactly, so use Tailwind's arbitrary value syntax to drop the generated CSS straight into a class name.

<div class="shadow-[4px_4px_10px_0px_rgba(0,0,0,0.3)]"></div>

Replace every space in the generated box-shadow value with an underscore and drop the leading box-shadow: and trailing semicolon. Tailwind also supports colored shadows separately from the arbitrary syntax, for example shadow-lg shadow-indigo-500/50 applies a large shadow tinted indigo at 50% opacity.

Browser Support

The box-shadow property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are required. Legacy support goes back to IE9.

How to Use This Generator

1. Drag the Horizontal and Vertical Offset sliders to position the shadow
2. Increase Blur Radius for a softer edge or keep it at 0 for a sharp shadow
3. Use Spread Radius to make the shadow larger or smaller than the element
4. Pick a Shadow Color using the color picker
5. Adjust Opacity so the shadow blends naturally with your background
6. Check Inset to flip the shadow to the inside of the element
7. Click Copy CSS and paste directly into your stylesheet

Frequently Asked Questions

Can I add multiple box shadows to one element?

Yes. Separate each shadow value with a comma. The first shadow listed appears on top. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08);

Why does my box shadow get cut off inside a parent element?

This happens when the parent has overflow: hidden set. The shadow renders outside the element's box, so hidden overflow clips it. Remove overflow: hidden from the parent or use filter: drop-shadow() instead.

Does box-shadow affect page layout?

No. Unlike margins or padding, box shadows do not take up space in the layout. An element with a large shadow will not push other elements away.

What is the difference between blur radius and spread radius?

Blur radius controls how soft or sharp the shadow edge is: 0 gives a hard edge, higher values feather it. Spread radius controls the overall size of the shadow before blur is applied: positive values make it larger than the element, negative values shrink it.

Can I use box-shadow on images or SVG elements?

Yes, but box-shadow follows the rectangular bounding box of the element, not the visible shape of the image. If you need a shadow that follows the actual shape of a PNG or SVG, use filter: drop-shadow() instead.

Is rgba() required for box shadow color?

No, any valid CSS color works: hex, rgb, hsl, or named colors. However, rgba() is the most practical because it lets you control opacity separately from color, which is important for shadows that blend naturally across different backgrounds.

Why is my box-shadow not showing up?

A few common causes beyond a clipping parent: the shadow color has 0 opacity or matches the background so closely it's invisible, the offset and blur are both set to 0 so there's nothing to render, or the element has no rendered box at all (inline elements without display: inline-block or a set width/height often show no shadow). Check the opacity value first, since that's the most frequent culprit.

Can a box-shadow have a gradient color?

No, each individual shadow in a box-shadow list only accepts a single flat color, gradients aren't supported directly. To fake a gradient shadow, stack two or three shadows of different colors at slightly different offsets so they blend visually, or place a pseudo-element behind the box with a CSS gradient background and blur it with filter: blur(). Our Gradient Generator can help you build the gradient itself.

Is there a separate box-shadow-color property?

Not as a property you can set on its own in stable CSS today. The color is part of the single box-shadow shorthand value, written directly after the offset and blur values. If you need to swap just the color dynamically, for example on hover or in dark mode, define the color as a CSS custom property and reference it inside the shorthand: box-shadow: 0 4px 10px var(--shadow-color, rgba(0,0,0,0.3));

What blur value should I use for a box shadow?

As a starting point: 4 to 8px for a subtle card or button shadow, 12 to 20px for a noticeably elevated card or dropdown, and 20px or higher for a soft ambient glow. Larger blur values need lower opacity, generally under 0.3, or the shadow starts to look heavy rather than soft.