What is CSS box-shadow?

Box-shadow is a CSS property that adds drop shadows or glowing effects to HTML elements. It can create depth and visual interest.

What do the box-shadow parameters mean?

offset-x (horizontal), offset-y (vertical), blur-radius (softness), spread-radius (size), and color. All except color can be negative.

Can I use multiple shadows?

Yes, separate multiple shadows with commas. This creates layered effects and complex shadow combinations.

What is inset shadow?

Inset shadows appear inside the element rather than outside. Add 'inset' keyword to the shadow properties.

Does box-shadow affect layout?

No, shadows don't take up space or affect the document flow. They're purely visual and won't change element dimensions.

How do I create a glow effect?

Use a larger blur-radius, increase spread-radius, and choose a bright color. Apply the same shadow multiple times for stronger glow.

CSS Box Shadow Generator

Create stunning drop shadows and glowing effects with live preview

Real-time Preview

See shadows update instantly as you adjust

Full Control

Offset, blur, spread, color, and opacity

Color Picker

Select any color and adjust opacity level

Copy Ready

CSS code ready to paste into stylesheet

Shadow Controls

Horizontal Offset (X):

10px

Vertical Offset (Y):

10px

Blur Radius:

15px

Spread Radius:

0px

Shadow Color:

Opacity:

50%

Effect Presets

Live Preview

CSS Code

Box Shadow Parameters

Parameter Meanings

Offset X: Horizontal distance (negative = left)
Offset Y: Vertical distance (negative = up)
Blur Radius: Softness (0 = sharp, higher = softer)
Spread Radius: Size increase (can be negative)
Color: Shadow color with opacity

CSS Syntax

box-shadow: X Y Blur Spread Color;

Example: 10px 20px 15px 0px rgba(0,0,0,0.3);

Common Applications

Depth & Elevation

Create layered visual hierarchy with shadows

Hover Effects

Enhance interactivity with interactive shadows

Glow Effects

Create neon and glowing appearance effects

Design Polish

Add professional polish to UI designs

Design Tips

Subtle is Better: Start with small shadows and adjust
Consistency: Use same shadow on related elements
Opacity: Shadows are more realistic with transparency
Multiple Shadows: Combine shadows with commas for effects

Performance: Minimal impact on rendering
Accessibility: Ensure text contrast with shadow backgrounds
Animation: Can transition shadow smoothly
Testing: Verify appearance on different devices

Keyboard Shortcuts

Ctrl + Shift + C Copy CSS

Click Preset for quick effects

Use ← → to fine-tune each param