ボックスシャドウジェネレーター

無料のCSS box-shadowジェネレーター。オフセット、ぼかし、広がり、色、不透明度のスライダーで影をデザインします。複数の影を重ねることも可能。CSSを瞬時にコピー。

Runs in your browserUpdated Apr 26, 2026

Offset X0px

Offset Y10px

Blur30px

Spread-10px

Opacity40%

Color

box-shadow: 0px 10px 30px -10px rgba(59, 130, 246, 0.40);

よくある質問

›Can I layer multiple shadows?

Yes — add as many shadows as you want, each with its own offset, blur, spread and color.

›Does it support inset shadows?

Yes — toggle 'inset' to make a shadow appear inside the element instead of outside.

›Does it output Tailwind?

Yes — for common single-shadow patterns. Multi-shadow stacks need custom CSS.

›Is the generator free?

Yes — fully free, no signup.