CSS Box Shadow Generator

What is CSS box-shadow?

The CSS box-shadow property applies shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

What are the components of a box shadow?

A box shadow has several adjustable properties:

• Horizontal offset - Positive values move right, negative left
• Vertical offset - Positive values move down, negative up
• Blur radius - Higher values create more diffuse shadows
• Spread radius - Expands or contracts the shadow size
• Color - Any valid CSS color value
• Inset - Changes the shadow from outer to inner

How do I use multiple shadows?

You can apply multiple shadows by separating them with commas:

box-shadow: 
  3px 3px 5px 0px rgba(0,0,0,0.2),
  -1px -1px 5px 0px rgba(255,255,255,0.8);

What's the difference between blur and spread?

Blur radius controls how fuzzy the shadow edges are, while spread radius changes the size of the shadow itself. A positive spread expands the shadow, while negative spread contracts it.

When should I use inset shadows?

Inset shadows create the illusion that the element is pressed into the page rather than raised above it. They're great for:

• Pressed button states
• Input fields
• Sunken panels
• Any element that should appear recessed

Advanced Shadow Techniques

For more creative designs, try these techniques:

• Neumorphism - Combine light and dark shadows for a 3D effect
• Layered shadows - Use multiple shadows with different opacities
• Colored shadows - Match shadows to your brand colors
• Animated shadows - Transition shadows on hover/focus