CSSシャドウ生成器
影の位置・ぼかし・広がり・色・透明度から、box-shadowのCSSを作ります。プレビューつき。
px
px
px
px
プレビュー
CSS(コピー用)
—
計算式
- box-shadow: 横 縦 ぼかし 広がり rgba(色, 透明度);
- 広がりをマイナスにすると、影が小さくなる(浮いて見える)
使い方のヒント
自然に見える影は、縦のずれを大きく、横を0にして、透明度を低め(0.1〜0.3)にします。複数の影を重ねると、より自然になるので、生成した値を、カンマでつないで、重ねてください。
関連ツール
よくある質問
CSSシャドウ生成器では何がわかりますか？
影の位置・ぼかし・広がり・色・透明度から、box-shadowのCSSを作ります。プレビューつき。
何を入力すればいいですか？
次の項目を入力します: 横のずれ、縦のずれ、ぼかし、広がり、影の色(HEX)、透明度(0〜1)。内容を変えると、結果もそれに合わせて変わります。
結果にはどんな項目が表示されますか？
「CSS(コピー用)」などが表示されます。
どんな計算式を使っていますか？
ページ内の「計算式」にまとめています。たとえば「box-shadow: 横 縦 ぼかし 広がり rgba(色, 透明度);」のような式です。
入力した値は外部に送信されますか？
いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。
結果はどのくらい正確ですか？
処理は標準的な仕様に沿っています。本番で使う前に、実際の環境(ブラウザ・OS・言語)で動作を確認してください。
結果をコピーできますか？
はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。
スマホでも使えますか？
はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。
同じカテゴリ(CSS・単位)の他のツールはありますか？
はい。CSS単位変換機、px→rem計算機、CSS clamp計算機、CSSサイズ計算機などがあります。