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

ソフトUI（ニューモーフィズム）のCSSを生成します。ベースカラーから導く明暗の影、フラット・凹型・凸型・押し込みの形状、4方向の光源に対応します。

ニューモーフィズム設定

ベースカラー

形状

光源

距離px

ぼかしpx

強度

半径px

サイズpx

#ffffff#b0b0b0

明るい影と暗い影は、ベースカラーの OKLCH 明度を強度の分だけ上げ下げして求めます。ページの背景にも同じ色を使ってください。

プレビュー

CSS コード

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

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

要素がページから押し出されている（または押し込まれている）ように見える、ソフトUIの見た目を作ります。ベースカラーから明るい影の色と暗い影の色を導き、反対向きの2つのbox-shadowとして組み合わせます。凹面と凸面には、グラデーションの塗りを任意で加えられます。

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

ベースカラーを入力します（ページの背景にも同じ色を使ってください）。
形状（フラット、凹型、凸型、押し込み）を選びます。
光源の方向を選びます。
距離、ぼかし、強度、半径、プレビューのサイズを調整します。
CSSコードをコピーします。

例

入力

Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px

出力

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

ニューモーフィズムジェネレーターを使うべき場面

遊び心のあるダッシュボード、スマートホームや音楽アプリのコントロール、ポートフォリオ作品に使います。ニューモーフィズムは本質的にコントラストが低いため、重要なボタンやフォーム欄に単独で頼らないでください。アクセシビリティのため、明確なラベル、アイコン、フォーカスリングを加えてください。

ニューモーフィズムジェネレーターの仕組み

明るい影と暗い影の色は、色相と彩度を保ったまま、ベースカラーの明度を強度の分だけ上げ下げして、OKLCHで計算されます（sRGBにガマットマッピング）。そのため、色付きや暗いベースでも機能します。暗い影は光源から離れる方向に距離の分だけ、明るい影は光源に向かって、どちらも同じぼかしでオフセットされます。押し込みは2つの inset 影を使います。凹型と凸型は、光の方向に合わせた角度の linear-gradient を加え、強度の3分の1だけ明るい色と暗い色を使います。