What do the box shadow values mean?

The box-shadow property takes four length values and a color: horizontal offset (positive = right, negative = left), vertical offset (positive = down, negative = up), blur radius (0 = sharp, higher = softer), and spread radius (positive = larger, negative = smaller). The color can be any valid CSS color value.

Can I add multiple shadows to one element?

Yes! You can add multiple box shadows by separating them with commas in CSS. For example: box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.1); This creates layered shadow effects for more realistic depth.

What's the difference between blur and spread?

Blur radius controls how soft the shadow edges are (higher values = softer, more diffused shadow). Spread radius controls the size of the shadow itself (positive values make it larger, negative values make it smaller). Use blur for softness and spread for size.

How do I create an inner shadow?

To create an inner shadow (shadow inside the element), add the "inset" keyword at the beginning of the box-shadow value. For example: box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2); This is useful for creating pressed button effects or recessed containers.

Box Shadow Generator

Enhance the visual appeal of your web elements. Craft unique shadows to add depth and dimension.

horizontal:

vertical:

blur:

spread:

color:

box-shadow: 4px 4px 4px 0px #252525;
-webkit-box-shadow: 4px 4px 4px 0px #252525;
-moz-box-shadow: 4px 4px 4px 0px #252525;

What is Box Shadow?

Box shadow is a CSS property that adds shadow effects around an element's frame. You can control the shadow's horizontal and vertical offset, blur radius, spread radius, and color. Box shadows create depth and visual hierarchy in web design, making elements appear to float above the page or recede into the background. Multiple box shadows can be layered for complex lighting effects.

How to Use the Box Shadow Generator

Adjust the horizontal offset to move the shadow left or right, and the vertical offset to move it up or down. The blur radius controls how soft or sharp the shadow appears, while the spread radius makes the shadow larger or smaller. Choose a shadow color using the color picker. The preview updates in real-time, and the generated CSS includes vendor prefixes for maximum compatibility. Click "Copy Code" to use the shadow in your project.

Design Tips for Box Shadows

Subtle shadows (small offset, moderate blur) work well for cards and buttons, creating a gentle elevation effect. Larger offsets and blur create dramatic depth for hero sections or modals. Dark shadows on light backgrounds and light shadows on dark backgrounds maintain good contrast. Avoid overly large spread values which can look unnatural. Consider using multiple layered shadows for more realistic lighting effects.

Box Shadow Generator

What is Box Shadow?

How to Use the Box Shadow Generator

Design Tips for Box Shadows

Frequently Asked Questions