โ FAQ โ Box Shadow Generator
How does the CSS box-shadow property work?
The box-shadow property takes: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 4px 24px rgba(0,0,0,0.15). You can stack multiple shadows separated by commas. The inset keyword makes the shadow appear inside the element. Blur creates the soft edge, spread grows or shrinks the total shadow size.
Can I add multiple box shadows?
Yes. CSS box-shadow accepts multiple comma-separated shadow values: box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 0 0 3px #e3f2fd. Layered shadows create richer depth effects. This generator supports adding multiple layers and combines them into a single CSS declaration automatically.
What is an inset shadow?
An inset shadow appears inside the element's border rather than outside. It creates a "pressed in" or "embossed" look. Add the inset keyword before the offsets: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Inset shadows are commonly used for inputs, buttons in pressed states, and neumorphic design effects.