CSS ボックスシャドウ生成ツール

developer

複数レイヤーの CSS ボックスシャドウと内蔵プリセット(ソフト、浮き出し、ニューモーフィズム)を生成。CSS、Tailwind、React インラインスタイルを出力。

#css#box-shadow#shadow#design#neumorphism#generator
Loading tool...

How to use

  1. 1パラメータを入力:x=0 y=4 blur=12 spread=0 color=#000000 opacity=0.15
  2. 2"---" を使用して複数のシャドウレイヤーを区切る
  3. 3"preset=soft" を入力してすべての利用可能なプリセットを表示

Frequently Asked Questions — CSS ボックスシャドウ生成ツール

インセットシャドウとは何ですか?+

インセットシャドウは要素の外側でなく内側に現れます。パラメータで "inset=true" を使用します。押された/凹んだ効果を作るのに最適です。

ニューモーフィズムとは何ですか?+

ニューモーフィズムは、明と暗の 2 つのシャドウを同時に使用して、要素が背景から浮かび上がるような錯覚を作る UI デザイントレンドです。

Related Tools