CSS ニューモルフィズム発生器

CSS Neumorphism Generator は、ソフト UI 要素、つまり、光と闇の影を組み合わせて、背景から押し出されたり、背景に押し込まれたりして、形状が穏やかに見えるスタイルを構築します。表面の色、影の距離、ぼかし、コントラストの強さ、コーナーの半径、形状を設定し、ライブ プレビューを見て、正確な CSS をコピーします。

ニューモルフィズムは、ページと背景を共有する要素に 2 つのボックス シャドウを配置することによって機能します。左上が明るい影と、右下の暗い影です。 2 つのシャドウ カラーとオフセットを、手作業ではやや柔らかく見せるのは、手の届くほどにやさしいものです。 このツールは、表面の色から明るい色合いと暗い色合いを自動的に導き出すため、効果は常にバランスが取れているように見えます。

すべてがブラウザで実行されます。 プリセットを選択し、スライダーを調整し、フラット、凹、凸、および押したシェイプを切り替えて、CSS をコピーします。 アカウントもアップロードもありません。ページが読み込まれた後もオフラインで動作します。

ニューモーフィズムは、アクセシビリティである主な弱点について、明確な目で使う価値があります。 このスタイルは、背景とほぼ同じ色の表面に明るい影と暗い影を配置することで機能するため、コントロールのエッジは、輝度の数パーセントの差によって定義されます。これは、一部の視聴者にはエレガントであり、コントラスト感度が低下した人、薄暗い画面、または屋外では目に見えないと読み取られます。インタラクティブコンポーネントの境界に 3:1 の比率を求める WCAG 1.4.11 に失敗します。通常の妥協点は、装飾的な表面のスタイルを維持し、真にインタラクティブな要素に実際の境界または明確な焦点状態を与えることです。シャドウカラーは、ここでは表面の色から派生しているため、暗い表面は、灰色のものではなく、正しく反転されたペアを生成します。