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

ニューモーフィズム（「ソフトUI」）は、要素に背景と同じ色を与え、2つの影を付けることで作ります。光から遠い側には暗い影、光に近い側には明るい影を置くと、要素がページから押し出されたように、あるいは押し込まれたように見えます。このジェネレーターは、neumorphism.ioと同じ方法で基本色から2つの影の色を計算し、どの光源の向きでもフラット・凹・凸・押し込みのバリエーションを出力します。結果のコントラストが低すぎてコントロールとして使いにくい場合は警告します。

使い方

1. 基本色を選びます。要素の背後のページも同じ色にする必要があります。
2. サイズ、角丸、影の距離、ぼかし、強さを設定します。
3. 形状と光の向きを選びます。
4. CSSをコピーします。ボタンや入力欄に使う前に、エッジのコントラストの警告を読んでください。

計算式

暗い色 = チャンネル × (1 − 強さ) · 明るい色 = min(255, チャンネル × (1 + 強さ)) · box-shadow: d d ぼかし 暗い色, −d −d ぼかし 明るい色

dは影の距離で、符号は光源の向きによって決まります。凹と凸の形状は、左上の光源なら145°の向きに10%暗い色から7%明るい色（または逆）へのグラデーションを加え、ほかの角の光源では対称に反転します。押し込みはinsetの影を使います。

計算例

#E0E0E0 で強さ15%の場合、各チャンネルは224 × 0.85 = 190.4 → #BEBEBE、224 × 1.15 = 257.6 → 上限の #FFFFFF となり、box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff になります。表面と暗い影のエッジのコントラスト比は 1.4:1 にすぎず、WCAGがインターフェースの部品に求める3:1をはるかに下回ります。