CSSもこれで簡単!Neumorphism(ニューモーフィズム)のスタイルシートを生成できるジェネレーター

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

カードやボタン、またフォームなどにも適したデザインで、凸凹のスタイルが簡単に生成できます。

サイトのキャプチャ

Neumorphism.io

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

ニューモーフィズムのデザイン方法と実装方法をやさしく解説

ニューモーフィズムのデザイン方法と実装方法をやさしく解説

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

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

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

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

光源の位置を変更

光源の位置を変更

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

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」で変更できます。

凸凹を変更

凸凹を変更

sponsors

top of page

©2020 coliss