🔘 ニューモーフィズム(ソフトUI)ジェネレーター

1つの基準色から明るい影と暗い影を同時に計算し、やわらかく押し込まれたようなソフトUI(ニューモーフィズム)スタイルを作成します。サイズ・角丸・影の距離・ぼかし・明暗の強さを調整し、凸/凹/平面の形を選んで、リアルタイムプレビューとともにCSSをコピーできます。

使い方

1. 基準色を選ぶと、明るい影と暗い影の二重の影が自動で計算されます。
2. 平面・凸・凹の中から好みの表面の形をタブで選びます。
3. サイズ・角丸・影の距離・ぼかし・明暗の強さのスライダーで質感を整えます。
4. 完成したborder-radius・background・box-shadowのCSSをコピーして使います。

よくある質問

適用したのに影が見えません。

ニューモーフィズムは要素と「親の背景色が同じとき」だけ自然に見えます。白い背景の上に明るいグレーのカードを置くと、明るい側の影が埋もれてしまいます。親コンテナの背景も基準色と同じに合わせてください。

凸・凹・平面はどう違いますか?

平面は表面色が単色で外に浮いた感じ、凸は表面に明→暗のグラデーションを入れて膨らんだ感じ、凹はグラデーションを反転して内側に押し込まれた感じになります。影の向きは3つとも同じです。

影の色が実際のデザインツールと違うことがありますか?

明るい・暗い色は基準色を白・黒と混ぜて近似計算した値のため、ツールごとに微妙に異なる場合があり参考用です。必要ならコピーしたあとにrgb値を直接微調整してください。計算はすべてブラウザ内で処理されます。