01
影の重なり順を見る
最初の影に小さな接地影を追加します。広がりを負にすると影の面積が縮み、Y方向のずれとは異なる結果になります。内側の影はその層だけに指定します。
HTMLとCSSのツール
CSSジェネレーター影からフィルターまで
影、枠線と角丸、変形、フィルターから選択。コピーするCSSは現在の効果だけです。
CSSジェネレーター
ライブプレビュー
色付きタイルの背景は見本です。出力CSSには含まれません。
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
設定はこのブラウザーのタブ内だけに残り、画像やCSSは送信されません。
効果の設定
ボックスシャドウのCSSを更新しました。
カードの影が硬すぎると感じても、ぼかしを増やすだけでは輪郭が広がる場合があります。CSSジェネレーターで広がりと透明度を別々に動かし、実際のタイルを見ながら陰影を整えられます。
このCSSジェネレーターでは、角丸と変形も同じページで試せます。モードを切り替えても各設定はタブ内に残りますが、出力は選択中の効果だけなので、不要な宣言を貼り付けずに済みます。
CSSジェネレーターを使う理由
柔らかな影を複数の層で作る
box-shadowジェネレーターの一層だけでは、広い環境光と近い接地影を同時に調整しにくいものです。最大四層に別々の色と不透明度を与え、CSSには設定順で並べます。
効果を切り替えてもコードを混ぜない
このCSSジェネレーターでは角丸、変形、フィルターの数値を保持します。CSSフィルターを調整した後で影に戻っても値は残り、コピーされる宣言は今見ている効果だけです。
数値の意味を確かめる三つの手順
02
角丸と変形の順番を確認する
角丸を連動すると四隅を一つの値で編集できます。変形は移動、回転、拡大縮小、傾きの順に出力され、貼り付け先で順番を変えると見え方も変わります。
03
更新後のCSSだけを書き出す
自動生成は最後の操作から約350ms後。停止時は生成ボタンかCtrl/Cmd+Enterを使います。例の読み込み、リセット、影の削除は適用前に確認でき、一度だけ元に戻せます。
四つの効果を数値で調整
複数のボックスシャドウ
box-shadowジェネレーターとして最大四層の位置、ぼかし、広がり、色、透明度、insetを扱います。一つのbox-shadow宣言にカンマでまとめます。
四隅を別々に設定
border-radiusジェネレーターでは四隅を連動または個別に設定し、枠線の幅、種類、色も同時に確認できます。幅を0にするとborder: noneになります。
関数の順番が決まった変形
CSS変形の移動、回転、拡大縮小、傾きは固定順です。中立の値は省き、すべて中立ならtransform: noneを出力します。
不要な関数を省くフィルター
CSSフィルターではぼかし、明るさ、コントラスト、彩度、グレースケール、セピア、色相、反転、不透明度を組み合わせられます。
出力の範囲と対応しない表現
- 選択した効果のみ
- 設定はページを開いている間だけ保持し、書き出すのは現在の宣言です。セレクター、HTML、古いブラウザー向け接頭辞や共有URLは作りません。
- 値の上限がある
- 影は最大四層、色は6桁の16進表記です。負のぼかしや範囲外の数値はエラーになり、コピーと保存を止めます。ずれと広がりには負の値を使えます。
- drop-shadowとは別物
- box-shadowは要素の箱に沿い、filter: drop-shadow()は不規則な画像の輪郭にも沿います。このフィルターにはdrop-shadowやbackdrop-filterを含めません。
- CSSの取り込みはしない
- 貼り付けたCSSの解析、楕円の角丸、アニメーション、3Dカード、画像書き出しには対応しません。見本の背景色もCSS出力には入りません。
CSSジェネレーターのよくある質問
複数の影を重ねて作成できますか？
はい。最大四層を追加でき、box-shadowの値はカンマでつながります。削除時は確認画面と一回の取り消しがあります。
insetのbox-shadowとは何ですか？
insetは影を箱の内側に描きます。ここでは層ごとに切り替えられるので、外側の影と組み合わせられます。
rgbaやhexカラーに対応していますか？
6桁のhex色と透明度を別々に入力します。影のCSSはrgba()として出力しますが、rgba文字列の直接入力は解析しません。
硬い縁ではなく柔らかい影にするには？
ぼかしを増やし、不透明度と広がりも一緒に調整します。二層に分けると接地影と広い影を別々に整えられます。
四つの角の値はどこから順に指定しますか？
左上、右上、右下、左下の順です。連動時は一つの半径、解除時は各角のpx値を出力します。
影の重なりで不自然な結果が出ましたか？