CSSノイモルフィズムジェネレーター

ソフトUIニューモルフィズムを視覚的に捉え、ベースカラー、光方向、形状を選び、CSSをコピーします.

How to use Neumorphism Generator

1. ベースの背景色を選ぶ - ソフトUIは、光またはミュートされたトーンで最適に動作します.
2. 要素のサイズ、ボーダーラディウス、シャドウ距離、ブラーと強度を設定します.
3. 軽い方向および形を選んで下さい:平ら、凹面、凸または押されたセット.
4. CSS をコピーして、完全な境界線、背景、ボックスシャドウのルールをコピーします.

Neumorphismジェネレータとは?

FAQ

なぜニューモルフィズムは2つのシャドウを使用するのですか?

ソフトUIは、要素の独自の背景色から構築された、反対側のダークシャドウとライトのハイライトシャドウを組み合わせることで、単一の光源を偽装します。 2つのボックスシャドウが一緒に表面を上げているか、日焼けさせます.

インセット(プレス)形状は?

両方のシャドウにインセットを追加すると、要素内でそれらを移動します。そのため、上に上げられたよりも表面に圧入します。 このツールは、押された形状と凹凸形状のインセットを自動的に適用します.

要素がページの背景に一致するのはなぜですか?

Neumorphism は、要素とその周辺が同じベースカラーを共有するときに、ソフトUI としてのみ読み込まれます。 背景が異なる場合、効果は、押し出しされた表面の代わりに普通のドロップシャドウのように見えます.

Related tools

• Text Shadow Generator
• CSS Triangle Generator
• Box Shadow Generator
• CSS Gradient Generator