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

ニューモーフィズムジェネレーターについて

Neumorphism Generatorは、背景から押し出されたように、あるいは押し込まれたように見える柔らかな「ソフトUI」の見た目をデザインします。ベースカラーを1色選ぶだけで、あとはツールがすべて自動で導き出します。これは、この効果が要素とその背景が同じ色を共有し、奥行きが完全に2つの相反するbox-shadowから生まれる場合にのみ機能するためです。

スライダーでサイズ、角丸、影の距離、強度、ぼかしといった形状を制御できます。flat、concave、convex、pressedという4つの形状モードは内部のグラデーションと影の向きを切り替え、光源ピッカーはハイライトを4つの角のどこにでも動かせるので、デザインの光の当たり方に要素を合わせられます。

デフォルトでは、明るい影と暗い影の色はベースカラーから自動計算されますが、手動モードでは両方を自分で設定できます。生成されたCSS(background、radius、そして2つのbox-shadow)はワンクリックでコピーできます。

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

1. ベースカラーを選びます。これは要素とその背後のキャンバスの両方に適用されます。
2. 形状を選びます。flat、concave、convex、pressedのいずれかです。
3. 光源の角を設定して、ハイライトの位置を制御します。
4. サイズ、角丸、距離、強度、ぼかしをスライダーで調整します。
5. 導出された明るい色と暗い色を上書きしたい場合は、手動シャドウカラーを有効にします。
6. CSSをコピーして要素に貼り付けます。

よくある質問