入力
ワークスペースを準備中…
使い方
- 水平・垂直オフセット、ぼかし、広がりを設定します。
- 色と不透明度を選び、必要なら「内側の影」を有効にします。
- プレビューを確認し、「CSS をコピー」を選びます。
ボックスシャドウを作る
影はカードを背景から浮かせたり、内側にくぼんだ面を表したりできます。少数の値で調整でき、画像を用意する必要はありません。
形状と色を変えながらプレビューを確認できます。角丸設定は形の比較用で、コピーする出力に無関係な宣言を加えません。
オフセット・ぼかし・広がり
水平と垂直のオフセットで、要素に対する影の位置を変えます。負数は左または上、正数は右または下に移動します。
ぼかしは輪郭を柔らかくし、負数にはできません。広がりは影の範囲を変え、負数で縮小、正数で拡大します。
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);下方向 8px、ぼかし 24px、不透明度 15% の黒い外側シャドウです。
色と内側の影
カラーピッカーで影の色、不透明度でアルファ値を指定します。不透明度を下げると背景が透けて見えます。
内側の影はボックス内部に描かれます。生成するのは 1 層です。多層の影はスタイルシートにカンマ区切りで記述してください。
CSS を使う
「CSS をコピー」が出力するのは box-shadow: のみです。プレビューと同じ角丸が必要なら、要素に border-radius を別途設定してください。
テキスト入力は最大 1 MiB。CSS と HTML の変換は Worker 内で実行し、制限時間は 30 秒です。色のツールは sRGB を使用します。生成したスタイルはプレビューのため、実際のレイアウトでテストしてください。
よくある質問
プレビューの角丸も CSS に含まれますか？
いいえ。角丸はプレビューのみです。UI で同じ形にするには border-radius 宣言を追加してください。
ぼかしと広がりの違いは？
ぼかしは輪郭を柔らかくします。広がりはぼかしの適用前に影の範囲を拡大・縮小します。
広がりは負数にできますか？
はい。負の広がりは影を小さくします。ぼかしは 0 以上にしてください。
内側の影を作れますか？
はい。「内側の影」を有効にすると、コピーした宣言に inset が含まれます。
複数レイヤーを生成できますか？
いいえ。生成は 1 層です。コピーした値に、カンマ区切りで別の影を追加できます。