ニューモーフィズムな見栄えのCSSを生成できる「Neumorphism/Soft UI CSS shadow generator」

ニューモーフィズムな見栄えのCSSを生成できる「Neumorphism/Soft UI CSS shadow generator」

「Neumorphism/Soft UI CSS shadow generator」は、各種項目を調整・選択するだけでニューモーフィズムな見栄えを実装できるCSSを生成してくれるジェネレータです。

各種設定項目

サイトでは左側でシャドウの方向指定と適用後の見栄え確認ができ、右側でカラーやサイズをはじめとする細かい各種設定を行います。
設定項目は上のイメージのように「カラー」「サイズ」「角丸半径」「シャドウの距離」「光の強さ」「ぼかし」「形状」の7項目が用意されており、カラーはカラーパレットを使用またはカラーコード入力で指定し、「サイズ」から「ぼかし」まではプログレスバーで値を調整していきます。

4タイプ用意されている「形状」項目では、要素が盛り上がっている見栄えや逆に凹んでいる見栄えもクリックで簡単に適用させることができ、適用時はそれぞれ下のイメージのような違いがあります。

各種形状適用時の見栄え

形状指定は単純な見栄え指定でなく動作によって見栄えを変化させたい場合にも便利で、例えばニューモーフィズムスタイルのボタンを作りたい場合にタイプ1を通常時、タイプ3をhover時、タイプ4をactive時のように組み合わせたりするのもできると思います。

各項目設定後は右側下部にCSSが出力されているので、それを任意の要素に適用すればニューモーフィズムな見栄えを実装することができます。

Close the search window,
please press close button or esc key.