CSS box-shadowジェネレーター

このツールの使い方

1. 1

   Drag the X offset and Y offset sliders (each from -50px to 50px) to move the shadow horizontally and vertically.

2. 2

   Adjust the Blur slider (0px to 100px) to soften the edges, and the Spread slider (-50px to 50px) to grow or shrink the shadow.

3. 3

   Pick a shadow color with the color swatch; the live preview square updates as you change any control.

4. 4

   Copy the generated box-shadow declaration from the output box at the bottom and paste it into your stylesheet.

CSS box-shadowジェネレーターとは何ですか？

よくある活用例

• Designing a soft elevation shadow for buttons or cards, then tuning Y offset and blur until the depth looks right.

• Prototyping a Material-style shadow by stacking the value this tool outputs with a second hand-written shadow.

• Generating a tight, low-blur shadow with negative spread for a crisp focus or hover state.

• Getting an exact box-shadow string to paste into a Tailwind arbitrary value, CSS module, or inline style.

• Teaching the difference between blur and spread by dragging each slider and watching the preview react.

• Quickly matching a shadow from a design mockup by eyeballing offsets against the live preview square.

よくある質問