CSS ニューモーフィズム ジェネレーター

CSS ニューモーフィズム ジェネレーターとは？

CSS ニューモーフィズム ジェネレーターは、Soft-UI（ニューモーフィズム）の見た目を作る無料のビジュアルツールです。同系色の 2 つのずれた影によって、要素が表面から浮き出して見えたり押し込まれて見えたりします。box-shadow のペアを手で調整せずに、あの繊細で触感のある奥行きが欲しい UI デザイナーやフロントエンド開発者向けです。ピッカーや 16 進数フィールドで基準色を設定し、形状を「平面」「凹」「凸」で切り替え、距離（影のずれ量）・強度（明暗コントラストの強さ）・ぼかし（柔らかさ）・角丸を調整します。ツールは基準色から明るいハイライトと暗い影を導き、これらを組み合わせ——凹・凸では細やかなグラデーションを重ねることもでき——1 つの CSS ルールにまとめ、対応する背景の上にライブ表示し、コピーできるコードとして出力します。

CSS ニューモーフィズム ジェネレーターの使い方

1. スウォッチで、または #e0e5ec のような 16 進数値を入力して表面の基準色を選びます。
2. 形状を選びます。「平面」は浮き上がったパネル、「凹」は押し込まれたくぼみ、「凸」はドーム状の膨らみになります。
3. 距離を設定して明暗の影を外側に移動させ、より深い浮き出しにします。
4. 強度を調整して、ハイライト/影のコントラストを強めたり控えめにしたりします。
5. ぼかしで縁を柔らかく/鋭くし、角丸で角を丸めます。
6. ライブプレビューを確認し、生成されたニューモーフィズム CSS をスタイルシートにコピーします。

使用例

色 #e0e5ec, 形状 平面, 距離 12, 強度 15, ぼかし 24, 角丸 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

色 #e0e5ec, 形状 凹, 距離 8, 強度 15, ぼかし 16, 角丸 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

色 #3a3f47, 形状 凸, 距離 6, 強度 20, ぼかし 12, 角丸 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

よくある質問

ニューモーフィズムとは？

ニューモーフィズム（Soft UI）は、同系色の 2 つのずれた box-shadow——左上に明るい影、右下に暗い影——を使い、要素が単色の表面から浮き出して見えたり押し込まれて見えたりするスタイルです。このツールは基準色から両方の影を導くため、常に表面と調和します。

平面・凹・凸の違いは？

平面は表面を単色のまま保ち、要素が背景より浮き上がって見えます。凹は左上に向かって暗くなる細やかなグラデーションを加え、内側にえぐれたように見せます。凸はグラデーションを反転させ、中央がドーム状に持ち上がって見えます。明暗の影は変わらず、表面の塗りだけが変わります。

距離・強度・ぼかし・角丸の働きは？

距離は両方の影のピクセルずれ量で、大きいほど要素が表面から離れます。強度は 2 つの影色が基準色よりどれだけ明るく/暗くなるかを制御します。ぼかしは影の縁を柔らかくし、角丸は角を丸めます。いずれを変えても CSS はライブで更新されます。

背景にはどの色を使えばよいですか？

ニューモーフィズムは、要素が同じ基準色の表面の上にあるときだけ正しく見えます——親要素やページ背景に同じ色を適用してください。プレビューは基準色を背景に使うので、コピー前に効果を正確に確認できます。

データはどこかにアップロードされますか？

いいえ。ジェネレーターはすべて JavaScript でブラウザ内で動作します——色や設定がサーバーに送信されることはないため、プライバシーが保たれ、ページの読み込み後はオフラインでも使えます。