CSSのbox-shadowコードを生成する方法

CSSのbox-shadowを組み立てる

このツールは、CSSのbox-shadow宣言を、オフセットやぼかし、広がり、色、内側シャドウの設定に合わせて作成するために使います。手書きで値の並びや単位を整える前に、外側または内側の影を組み立てたいときに便利です。数値をすべて指定することも、初期値を使って調整を始めることもできます。

設定してCSS宣言を生成する手順

1. 水平方向のオフセット、垂直方向のオフセット、ぼかし、広がりを入力します。これらは任意の数値項目で、入力しない場合の初期値は順に2、2、5、0です。
2. 色の入力欄にシャドウの色を指定します。初期値は#00000033です。要素の内側に影を付ける場合は、内側シャドウのチェック項目を有効にします。外側の影にする場合は有効にしません。
3. 生成用の操作を実行し、表示されたCSS宣言を確認します。入力した4つの数値にはpxが付加され、内側シャドウを有効にした場合は宣言にinsetが加わります。必要に応じて値や色を変更し、もう一度生成します。

生成結果の読み方

結果は、box-shadowで使える宣言として、影の位置、ぼかし、広がり、色を確認できる形で表示されます。insetが含まれていれば要素の内側に描画する指定で、含まれていなければ通常の外側シャドウの指定です。水平方向と垂直方向、ぼかし、広がりのすべてに0を使った計算でも、確認された計算経路では成功結果が報告されています。

出力をスタイルシートへ移す前に、対象の要素やデザインに合う色と数値かを確認してください。数値の並びは、入力した順序どおりに水平方向、垂直方向、ぼかし、広がりとして反映されます。

使用例

カードの内側に、右下方向へ少しずらした半透明の影を設定したい場合に、この値を入力します。

水平方向のオフセットに8、垂直方向のオフセットに4、ぼかしに12、広がりに2、色に#00000066を入力し、内側シャドウを有効にして生成します。

box-shadow: inset 8px 4px 12px 2px #00000066;のように、4つの数値へpxが付き、insetを含むCSS宣言として表示されます。

制限事項

• 数値の許容範囲、色の入力形式、丸めやエラー処理については、ここで確認できる仕様に含まれていません。入力後に表示された宣言が目的のスタイルと合うか確認してください。

よくある間違い

• 内側の影にしたいのに内側シャドウのチェック項目を有効にしていないと、insetのない宣言になります。内側へ描画する場合は、その項目を有効にしてから再生成してください。

よくある質問

CSSのbox-shadowの数値や色は変更できますか？

はい。水平方向と垂直方向のオフセット、ぼかし、広がり、色を任意に指定できます。数値項目の初期値は2、2、5、0で、色は#00000033です。

要素の内側に影を付けるにはどうしますか？

内側シャドウのチェック項目を有効にした場合、生成された宣言にinsetが加わります。有効にしなければ、insetのない宣言になります。

オフセットやぼかしを0にできますか？

確認された計算経路では、オフセット、ぼかし、広がりに0を指定したケースでも成功結果が報告されています。ただし、具体的な入力値を設定して生成結果を確認してください。