ニューモーフィズムのUIで見かけるさまざまなCSSを簡単に生成できる無料ツール -Neumorphic Generator

ボタンやカードなど、ニューモーフィズムのUIデザインで見かけるさまざまな要素を実装するCSSを簡単に生成できる無料オンラインツールを紹介します。

矩形や丸などの形、カラーや角丸やブラーなども簡単にカスタマイズできます。

Neumorphic Generator

ニューモーフィズムは最近注目されているUIデザインのトレンドで、Webサイトやスマホアプリでもよく見かけるようになりましたね。

ニューモーフィズムをデザインする時に知っておきたいポイント

Neumorphic Generatorの使い方は、簡単です。
まずは、カラーと形を決め、「Next」ボタンをクリックします。

Neumorphic Generator

そのまま使用してもよいですが、サイズや角丸やブラーなどのカスタマイズも簡単にできます。

Neumorphic Generator

完成したら、下部の「copy all」をクリックすると、CSSをコピーできます。
あとは、divなどに適用するだけです。いくつかコードを生成してみました。

まずは、ニューモーフィズムでよく見かける凹の矩形。

HTMLは、divにclassを与えるだけです。

カードやボタンなどに使用される凸の矩形も簡単です。

サークルの形もニューモーフィズムで人気が高いです。

凸のサークルは、アイコンのボタンにも適していますね。