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.