)

Box Shadow Generator

Create beautiful CSS box shadows with multiple layers. Visualize your shadows in real-time and export as CSS or CSS variables.

Box Shadow Generator

Create beautiful box shadows with multiple layers, presets, and export options

Shadow Layers

Preset Styles

Horizontal Offset: 0px

Vertical Offset: 4px

Blur Radius: 6px

Spread Radius: 0px

Shadow Color

Opacity: 0.10

Inset Shadow

Element Background

Preview Background

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

Understanding Box Shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can specify multiple shadows by separating them with commas. Each shadow is described by several values including offset, blur, spread, color, and optionally inset.

Shadow Properties

Horizontal Offset: Moves shadow left (negative) or right (positive)
Vertical Offset: Moves shadow up (negative) or down (positive)
Blur Radius: Larger values create softer, more diffused shadows
Spread Radius: Expands (positive) or contracts (negative) the shadow
Color: Shadow color with opacity control
Inset: Creates inner shadow instead of outer

Multiple Layers

You can create multiple shadow layers by adding them as comma-separated values. This allows you to create complex, realistic shadow effects. For example, combining a soft, large blur with a sharper, closer shadow creates depth and dimension.

box-shadow: 
  0 2px 8px rgba(0,0,0,0.1),
  0 1px 3px rgba(0,0,0,0.08
  </>
);

Preset Shadow Styles

Soft

Subtle shadow with low opacity, perfect for cards and subtle elevation.

Medium

Balanced shadow with moderate blur, ideal for buttons and interactive elements.

Hard

Sharp shadow with minimal blur, creates strong definition and contrast.

Glow

Colored glow effect with high blur, great for highlights and emphasis.

Inner

Inset shadow creates a pressed or recessed appearance.

Lifted

Large blur with downward offset creates a floating effect.

Frequently Asked Questions

How do I create a realistic shadow?

Realistic shadows often use multiple layers. Start with a soft, large blur shadow for ambient light, then add a sharper, closer shadow for the main light source. Keep offsets small and use low opacity values (0.1-0.2) for natural-looking results.

What's the difference between blur and spread?

Blur radius controls how soft and diffused the shadow edge is. Spread radius controls the size of the shadow itself—positive values make it larger, negative values make it smaller. Blur affects softness, spread affects size.

When should I use inset shadows?

Inset shadows create the appearance of an element being pressed into or recessed from the surface. They're useful for buttons in pressed states, input fields, and creating depth in flat designs.

How many shadow layers should I use?

Most designs work well with 1-3 shadow layers. More layers can create complexity but may impact performance. Start simple and add layers only when needed for the desired effect.