CSSボックスシャドウジェネレーター：ライブプレビュー
オフセット、ぼかし、広がり、色、不透明度を調整してCSSのbox-shadow値を作成し、ライブプレビューを見てコードをコピーします。
CSSボックスシャドウジェネレーター
このジェネレーターは、水平方向のオフセット、垂直方向のオフセット、ぼかし半径、広がり半径、独自の不透明度スライダーを持つ影の色、そしてinset(内側)の切り替えという6つの設定から、1つのCSS box-shadow値を作成します。さらに2つのカラーピッカーがプレビューボックスとその背景を設定するため、明るい背景でも暗い背景でも影の見え方を確認でき、soft、hard、glow、insetという4つのプリセットはワンクリックで完成済みの組み合わせを読み込みます。値を変更するたびにプレビュー下のbox-shadow行が即座に更新され、そのままコピーできます。
box-shadow値の仕組み
CSSは影を決まった順序の数値として書き出します。水平オフセット、垂直オフセット、ぼかし半径、広がり半径、そして色という順で、影をボックスの背後ではなく内側に描く場合は先頭にinsetという単語が付きます。水平と垂直のオフセットは影を横または縦にずらし、どちらも-50pxまでの負の値を受け付けるため、影をボックスの左側や上側に配置することもできます。ぼかし半径は0から100pxの範囲で影の縁を柔らかくし、広がり半径は-50から50pxの範囲でボックス自体の大きさとは関係なく影を広げたり縮めたりします。カラーピッカーの16進値は赤・緑・青の成分に分解され、0から1の不透明度スライダーはrgba()内の4番目の値になります。0では影は完全に透明になり、1では選んだ色とまったく同じになります。
計算例
水平オフセットを3px、垂直オフセットを3px、ぼかしを12px、広がりを0pxに設定し、影の色を#4338ca、不透明度を0.3にすると、box-shadow: 3px 3px 12px 0px rgba(67, 56, 202, 0.3)という結果になります。16進コード#4338caは赤67、緑56、青202に分解され、不透明度スライダーの0.3は追加の変換なしにそのままrgba()の4番目の値になります。同じ6つの値のままinsetをオンにすると、同じ影がボックスの背後ではなく縁の内側に描かれ、押されたボタンやへこんだ入力欄によく使われる効果になります。
コピー用のCSS出力
.card {
box-shadow: 3px 3px 12px 0px rgba(67, 56, 202, 0.3);
}