無料のCSS box-shadow ジェネレーター

順番に、inset（省略可）、X オフセット、Y オフセット、ぼかし半径、スプレッド半径、色です。X が正の値だとシャドウは右に、Y が正の値だと下に移動します。ぼかしが 0 だと輪郭がくっきりします。このツールは、4つの長さをすべて px で書き出し、そのあとに色を出力します。

Y オフセットを小さく、ぼかしを大きく、不透明度を低くし、スプレッドは 0 付近にします。ここでのおすすめの開始値は、Y 6 px、ぼかし 24 px、不透明度 12% で、0px 6px 24px 0px #0000001f になります。さらに、もう1つ範囲の狭いレイヤーを加えると、奥行きが増します。

ぼかしはシャドウの縁をやわらげ、値が大きいほど広い範囲にわたってぼんやり消えていきます。スプレッドは、ぼかしを適用する前にシャドウを拡大または縮小します。正の値ならボックスより大きく、負の値なら小さくなります。ここではぼかしは 0〜100 px、スプレッドは -50〜50 px の範囲です。

「シャドウレイヤーを追加」をクリックします。各レイヤーにはタブと個別の設定があり、コードではカンマでつないで1行ずつ並びます。CSS ではリストの先頭のシャドウが一番上に描かれるため、レイヤー1がほかのレイヤーより上に重なります。

レイヤーを選択して「インセットシャドウ」にチェックを入れます。コードに inset キーワードが追加され、シャドウはボックスの外側ではなく内側に描かれます。inset のときは、スプレッドが正の値だと内側のシャドウが太くなります。1つのルールの中で、内側と外側のレイヤーを組み合わせることもできます。

オフセットが逆向きの2つのレイヤーを使います。1つは暗い色で、たとえば X と Y を 8 px にした不透明度15%の #000000、もう1つは -8 px で不透明度100%の白です。要素とその親要素には、同じやわらかい背景色を指定してください。ここのプレビューカードは白のままなので、実際のページで結果を確認してください。

box-shadow は要素のボックスと角丸に沿ってシャドウが付き、スプレッドと inset に対応しています。filter の drop-shadow() は、透過 PNG や SVG アイコンのように見えている形に沿ってシャドウが付きますが、スプレッドと inset はありません。このツールが出力するのは box-shadow のみです。

いいえ。シャドウはスペースを取らないため、ほかの要素を押しのけたり、ボックスのサイズを変えたりすることはありません。ただし、overflow: hidden を指定した親要素ではシャドウが切れることがあります。ぼかしやオフセットが大きいときは、要素の周囲に余白を取ってください。

このツールは不透明度を2桁の16進数として色に追加するため、#1e293b のような6桁の16進コードでのみ動作します。#fff などの短縮コード、色名、rgba() は無効な CSS になり、シャドウが消えます。ぼかしに0未満、不透明度に100を超える値を入力した場合も同様です。

出力はそのままの CSS なので、直接は取得できません。Tailwind では、値を任意値のシャドウクラスに入れ、shadow-[0px_4px_12px_0px_#00000026] のように各スペースをアンダースコアに置き換えます。または、完全な値をテーマのカスタムシャドウとして追加してください。

はい。無料で、アカウントも不要、シャドウやレイヤーの数にも上限はありません。入力した値はこのタブ内にのみ保持され、保存されないため、再読み込みするとデフォルトのシャドウに戻ります。公開サイトでは、Google Analytics が計測するのは「CSSをコピー」のクリック数だけで、シャドウの値は計測しません。