Neumorphism Generator

使い方

1. ベースカラーを選びます。カードと下地がこの色を共有し、共有しているからこそ効果が成立します。
2. サイズと角丸でカードの形を整えます。
3. 距離で影の広がり、強度で 2 つの影色がベースカラーからどれだけ離れるかを設定します。
4. 形状を選びます。凸は外側、凹は内側に 2 つの影を描き、フラットは影を描きません。
5. CSS をコピーします。コメント行に派生した 2 つの影色が記録されるので、他の場所でも再利用できます。

よくある用途

• 盛り上がったコントロール —— 同じ下地から膨らんで見えるボタン、トグル、カード。
• 押し込み状態 —— ボタンの :active を凹に切り替えれば押された表現になります。
• 扱いやすいベースカラーを探す —— わずかに青みのある中間グレーは、純白や純黒より 2 つの影を保持しやすくなります。
• ソフト UI の方向性を試作する —— 距離と強度をここで決め、数値をデザイントークンに移します。
• コントラストを確認する —— プレビューの文字は明暗が自動で切り替わるため、ベースカラーが耐えなくなる瞬間が分かります。

よくある質問

Q: 白や黒の背景では効果が消えるのはなぜですか？ A: 2 つの影はベースカラーを暗く・明るくして作られます。白や黒に近いと片方向に余裕がなく、その影が消えてしまいます。

Q: ボタンの押下状態はどう作りますか？ A: 静止状態は凸、:active は凹を生成し、他の値はすべて同一にします。変わるのは影の向きだけです。

Q: アクセシビリティは大丈夫ですか？ A: ニューモーフィックなコントロールは下地とのコントラストが低くなりがちで、影だけでは支援技術に状態が伝わりません。可視ラベル、フォーカスリングを残し、目標とするコントラスト比を満たしてください。