CSS Box Shadow Generator

Q: 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.

Q: 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 and 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 and negative values shrink it.

Q: Is rgba() required for box shadow color?

No, any valid CSS color works, including 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.

Generate CSS box shadows visually. Adjust values and copy the code instantly.

Horizontal Offset 4px

Vertical Offset 4px

Blur Radius 10px

Spread Radius 0px

Shadow Color

Opacity

Inset shadow

Generated CSS

box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.3);

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.

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);

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.

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

Drag the Horizontal and Vertical Offset sliders to position the shadow
Increase Blur Radius for a softer edge or keep it at 0 for a sharp shadow
Use Spread Radius to make the shadow larger or smaller than the element
Pick a Shadow Color using the color picker
Adjust Opacity so the shadow blends naturally with your background
Check Inset to flip the shadow to the inside of the element
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.