CSS Box Shadow ジェネレーター
「CSS Box Shadow ジェネレーター」はコード、データと QRに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。
使い方
使い方
- Adjust offset, blur, spread, color, opacity, and inset for the first shadow.
- Add more layers when you need a softer or more dimensional effect.
- Inspect the live preview and copy the generated box-shadow declaration.
Layer shadows for depth
A single shadow is useful for direct elevation. Add layers to combine a close, darker edge with a wider, softer shadow. CSS paints the first listed shadow on top, so place the sharpest layer first when you want it to stay visible.
Offsets, blur, and spread
Horizontal and vertical offsets move the shadow from the box. Blur softens its edge. Positive spread expands it before blur, while negative spread contracts it. The controls accept practical pixel ranges to keep the preview responsive and the generated declaration easy to use.
Inset and color transparency
Turn on inset to draw a shadow inside the box, often useful for pressed controls or recessed panels. Opacity is converted to an rgba() alpha value in the copied CSS. The preview and CSS are generated locally in your browser.
よくある質問
あわせて知りたいこと
How many shadows can I add?
You can combine up to eight layers. A small number is usually easier to tune and maintain in a stylesheet.
What does a negative spread do?
It shrinks the shadow shape before the blur is applied. This can make a large blur begin closer to the box edge.
Is the copied CSS compatible with ordinary stylesheets?
Yes. The tool produces a standard box-shadow declaration using pixel lengths and rgba() color values.
Does the preview exactly match every website?
It uses the browser’s CSS renderer, but the surrounding background, border radius, element size, and other styles in your page can change the final visual result.