Generador de Box Shadow CSS

What is CSS Box Shadow Generator?

CSS Box Shadow Generator lets you visually design box shadows by adjusting offset, blur radius, spread radius, and color. See a live preview and copy the finished box-shadow CSS property value.

Parameter reference

• Horizontal offset: positive shifts shadow right, negative shifts left.
• Vertical offset: positive shifts shadow down, negative shifts up.
• Blur radius: higher values produce a more diffuse, softer shadow.
• Spread radius: positive expands the shadow size; negative contracts it.
• Color: use rgba for transparency (e.g. rgba(0,0,0,0.2)).
• Inset: makes the shadow appear inside the element rather than outside.

Notes

• Multiple shadows can be layered by separating values with commas in CSS.
• Box shadow does not affect layout — it is purely visual.
• Use filter: drop-shadow() for shadows on non-rectangular elements like PNG images.

FAQ

What is the difference between blur and spread?

Blur softens the shadow's edge. Spread changes the size of the shadow before blurring. A spread of 0 with high blur produces a soft glow; a high spread with low blur produces a hard, extended shadow.

How do I create a subtle elevation shadow like Material Design?

Use a low-opacity black with a slight vertical offset and moderate blur, e.g. 0 2px 8px rgba(0,0,0,0.15). Layer multiple shadows of different sizes for more realistic depth.

Does box-shadow affect performance?

Box shadows are GPU-accelerated in modern browsers and have minimal performance impact. Animating box shadows can be slower — prefer animating opacity or transform for smooth transitions.