Neumorphism CSS Shadow — 2 層コード
CSS ボックス シャドウ コードを視覚的に構築します。オフセット、ぼかし、スプレッド、不透明度のあるカラー、インセット モード、およびライブ プレビューを備えた最大 4 つのレイヤーのスライダー。
処理中...
0%
結果
このページでは、すでに構築されている古典的なニューモーフィック ペアを含むジェネレーターが開きます。白に近い明るいレイヤー オフセット -8px/-8px と、落ち着いたグレー ブルーの暗いレイヤー オフセット 8px/8px、どちらも 16 ピクセルぼかされています。レイヤーリスト内の 2 つのレイヤーを切り替えて、それぞれの側を個別に調整します。
Neumorphism (ソフト UI) は、2020 年頃にピークを迎えたエンボス スタイルです。要素は背景上に浮いているのではなく、背景から押し出されて見えます。正直なところ、これには実際のトレードオフが伴います。この効果は要素の背景がページの背景と一致する場合にのみ機能し、コントラストの低いエッジはアクセシビリティを損なう可能性があります。そのため、ほとんどのチームは現在、デザイン言語全体としてではなく、アクセントとしてそれを使用しています。
スタイルがプロジェクトに適合する場合は、この 2 層の宣言が正規の開始点となります。CSS をコピーし、要素とページの背景を同じソフト グレーに設定し、一致する境界線の半径を追加します。すべてがブラウザ内でローカルに実行されます。