Neumorphism（ニューモーフィズム）のCSSはこれで簡単！スタイルシートを生成できるジェネレーター

Post on:2020年5月10日

sponsors

ニューモーフィズムとはで紹介したように、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーターを紹介します。

カードやボタン、またフォームなどにも適したデザインで、ニューモーフィズムの凸凹のスタイルをCSSで簡単に実装できます。

ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。このシャドウを手動で定義するのはなかなか面倒です。

使い方は、とっても簡単。
「color」を設定し、サイズや角丸や凸凹具合をスライダーで設定するだけです。

リアルタイムにニューモーフィズムのスタイルを生成

左のコーナーをクリックすると、光源の位置が変わります。

光源の位置を変更

生成したCSSはコピペで簡単に利用できます。

border-radius: 50px;
background: #EBECF0;
box-shadow:  5px 5px 20px #c8c9cc, 
             -5px -5px 20px #ffffff;

border-radius: 50px;

background: #EBECF0;

box-shadow: 5px 5px 20px #c8c9cc,

-5px -5px 20px #ffffff;

CSSを使用すると、こんな感じに。

border-radius: 50px;
background: #EBECF0;
box-shadow: 5px 5px 20px #c8c9cc,
-5px -5px 20px #ffffff;

凹だと、こんな感じ。

border-radius: 50px;
background: #EBECF0;
box-shadow: inset 5px 5px 20px #c8c9cc, 
            inset -5px -5px 20px #ffffff;

border-radius: 50px;

background: #EBECF0;

box-shadow: inset 5px 5px 20px #c8c9cc,

inset -5px -5px 20px #ffffff;

border-radius: 50px;
background: #EBECF0;
box-shadow: inset 5px 5px 20px #c8c9cc,
inset -5px -5px 20px #ffffff;

凸凹はスライダーの下「Shape」で変更できます。

凸凹を変更