ボックスシャドウ ジェネレーター

box-shadow・ボタンジェネレーターとは？#

box-shadow は、要素の背後に落とす影を描画する CSS ルールです。名前にもかかわらず、影以上のことをします。正しく重ねれば、モダンな UI のカードやボタンに物理的な質感を与える柔らかな浮き上がり効果を生み、押された状態のための内側の溝を彫り込み、フォーカスされた入力の周りに色付きのグローを模倣できます。厄介なのは、1 つの影を 正しく 作るにはレイヤーごとに 5 つの値（オフセット X、オフセット Y、ぼかし、広がり、色）と、オプションの inset キーワードを操る必要があり、しかも大半の本物のボタンは 2〜3 レイヤーを重ねるため、結局 10〜15 個の数値を手作業で調整することになる点です。

本ページはその計算を省きます。サイドバーでシャドウレイヤーを重ね、ボタンの角丸、枠線、余白、色を調整すると、右ペインにシャドウが適用されたライブのボタンが表示され、貼り付け即席の .btn CSS ルールと対応する <button> HTML の両方が書き出されます。読み込み時に表示される既定値は、モダンなデザインシステムで使われるおなじみの 2 レイヤー浮き上がりボタンで、そこからブランドに合わせて微調整する上々の出発点です。

使い方#

サイドバーにコントロールがあり、右ペインにプレビュー、CSS 出力、HTML 出力があります。

1. シャドウを組み立てます。 シャドウ の下で レイヤーを追加 をクリックして新しいレイヤーを重ねます。各レイヤーには 6 つのコントロールがあります。
   • オフセット X / オフセット Y — シャドウが右/下へどれだけずれるか（負の値は左/上）。0/0 で中央に置かれ、均一なグローになります。
   • ぼかし — エッジの柔らかさ。0 は硬くて平坦なコピー、大きな値で拡散します。CSS でぼかしは負にできません。
   • 広がり — シャドウの範囲を広げたり狭めたりします。負の広がりは、広いぼかしをきつく説得力のあるエッジに締めます。
   • 色 — hex カラー。アルファチャンネル（#00000033 のような 8 桁 hex）を使うとシャドウが半透明になり、完全に不透明な色は #RRGGBB として描画されます。
   • 内側 — これをオンにすると、要素の 内側 に（押し込まれた、彫り込まれた見た目で）シャドウを描画します。
   • レイヤー %n を上に移動 / 下に移動 / 削除 でレイヤーの並び替えや削除を行います。リストの先頭レイヤーが最前面、末尾が最背面に描画されます。
2. ボタンをスタイルします。 ボタン の下で ラベル テキストを設定し、続けて 角丸、枠線 の太さ、枠線の色、余白 Y / X、背景、文字色 を設定します。色フィールドは hex テキストボックスとネイティブカラーピッカーの組み合わせです。
3. 必要なものをコピーします。 CSS の横の コピー で .btn ルール全体を、HTML の横の コピー で <button> 要素を取得します。枠線の太さを 0 にすると、枠線は border: none; に折り畳まれます。

主な機能#

• 順序付きの複数レイヤー。 説得力のあるシャドウは、ほぼ常に 2〜3 レイヤーです — 要素に寄り添うきつく暗いエッジと、さらに外側の柔らかく薄いウォッシュ。必要なだけ重ね、並べ替えられます。
• アルファ対応の色シリアライズ。 完全に不透明な色はきれいな #RRGGBB で出力されます。透明度を加えた瞬間にアルファを丸めた rgba(r, g, b, a) に切り替わり、実際のスタイルシートが使う形式になります。
• 1 つのルールにボタン全体。 角丸、枠線、余白、背景、文字色、シャドウがすべて単一の .btn ブロックに出力されるため、1 回の貼り付けで要素を完全にスタイルできます。
• 整合する HTML。 HTML 出力は <button class="btn">Label</button> だけで、ラベルは HTML エスケープされます — < や & だらけのラベルでも安全に貼れます。
• 左から右に固定のライブプレビュー。 正の X オフセットは常にシャドウを右にずらすため、ページの言語に関わらずプレビューは LTR に固定されます。

実例#

ページは作り込み済みのインディゴの浮き上がりボタンで読み込まれます。シャドウは 2 レイヤーで、ボタンに寄り添う -1px 広がりのエッジと、さらに外側のより広く薄いウォッシュです。生成される正確な CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

2 つのレイヤーが協調していることに注目してください。1 つ目（4px 6px ぼかし、-1px 広がり、0.2 アルファ）が接触エッジの crisp さを定義し、2 つ目（10px 15px ぼかし、-3px 広がり、0.102 アルファ）が周囲の浮き上がりを与えます。アルファを下げればシャドウは平らな黒のスタンプになり、広がりを上げればボタンが浮きすぎて見えます。

押された 状態を作るには、これらのレイヤーをクリアして単一のレイヤーを追加します。内側 オン、オフセット 0/2、ぼかし 4、広がり 0、色 #00000033。出力は inset 0 2px 4px rgba(0, 0, 0, 0.2) になり、要素が表面に沈み込んだように見え、:active スタイルにうってつけです。

よくある質問#

hex を入力したのに色が rgba(...) で出力されるのはなぜですか？#

hex にアルファチャンネル（#00000033 のような 8 桁）があるとき、ツールはそれを rgba(r, g, b, a) としてシリアライズします。それが、ほとんどの CSS ツーリングと古いブラウザが確実に解釈する形式だからです。完全に不透明な色 — アルファなし、あるいはアルファ FF — はコンパクトな #RRGGBB のままです。両方とも、設定した通りの見た目に描画されます。下流でどちらの記法がより堅牢か、という違いだけです。

レイヤーはどの順序で描画されますか？#

リストの先頭レイヤーが最前面に、末尾が最背面に描画されます。自然な浮き上がりを作るには、鋭く暗く近いレイヤーを先頭に、柔らかく明るく遠いレイヤーを 2 番目にしてください — そうすれば、きつい接触エッジが周囲のウォッシュに埋もれません。レイヤー %n を上に移動 / 下に移動 でプレビューが整うまで並べ替えてください。

ぼかしと広がりの違いは何ですか？#

ぼかし はシャドウのエッジを柔らかくします（色から透明へのグラデーション）。広がり は、ぼかしを適用する前にシャドウ全体を固定量で広げたり狭めたりします — 正の広がりは大きくより固体にし、負の広がりはそれを削り、広いぼかしレイヤーにきつくプロフェッショナルなエッジを与える秘訣です。よくある失敗は、ぼかしだけで済ませてふわふわの雲を作ってしまうこと。-2px や -3px の広がりを足すと、形が引き締まります。

このシャドウをボタンではなく div に使えますか？#

はい。CSS は box-shadow を受け付ける任意の要素に効きます — box-shadow: 行だけをコピーするか、ルール全体をあなたのセレクターにリネームして、不要なボタン固有の宣言を外してください。HTML 出力が意味を持つのは、実際に <button> が欲しいときだけです。