CSSもこれなら簡単！ニューモーフィズムのスタイルシートを生成できるジェネレーター -Neumorphism.io

Post on:2020年2月10日

sponsors

先日紹介したニューモーフィズムの繊細なデザインでつくられたフォームのように、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装する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;

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

凸凹を変更