box-shadowプリセット

このツールでできること

• box-shadowプリセットでは、subtleから2xlまでの6種類のbox-shadow参考値を表示します。横位置・縦位置・ぼかし・色の違いを比較できる固定表で、CSS生成やプレビューは行いません。

使い方

1. 「項目」で影の段階を選び、「内容」で対応するbox-shadow値を読みます。
2. 掲載の3つの長さは横オフセット、縦オフセット、ぼかし半径の順です。4つ目の広がりは省略され、色はrgbaで指定されています。
3. mediumと2xlなどを比べ、縦のずれ・ぼかし・透明度がどのように異なるか確認します。
4. 採用前に自分の画面の背景色や要素サイズで見え方を確認してください。表自体に編集・コピー専用ボタン・プレビュー機能はありません。

入力例・出力例

よくある利用シーン

• カードなどに使う影の候補を、ずれ・ぼかし・色の値から比較したいとき。
• 既存CSSのbox-shadow値を読み解き、参考値との違いを確認したいとき。

結果確認のポイント

• CSSや設定値を生成するツールでは、実装へ反映して対象の表示を確認してください。参照表では、掲載値の単位・前提・対象環境を確認してから採用してください。
• 表示された前提や単位が目的と一致しているか見直してください。
• 結果を他の場所へ転記する場合は、利用先で改行・記号・値が変わっていないか確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• box-shadowプリセットの主要な処理はブラウザ内で実行されます。
• 保存の有無はツールによって異なります。ブラウザ内の保存領域を使う機能では、ページを閉じても設定や作業内容が残る場合があります。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

アクセス解析・広告・保存データの詳しい取り扱い

よくある質問

関連ツール