filter:drop-shadowジェネレーター

画像の形に影を落とすのによく使われるfilter関数のdrop-shadowを確認するためのジェネレーターです。
各種プロパティなどページ下部に詳しい説明を書いてあります。
box-shadowやReact Nativeのshadowのジェネレーターは別ページになります。

/* preview */
background-color: #fff;

/* drop-shadow */
filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));

background-color：#fff

drop-shadowの設定

x：0px

y：0px

blur：16px

shadow-color：rgba(0,0,0,0.6)

filter:drop-shadowのプロパティについて

filter: drop-shadow(左右の位置 上下の位置 色);

filter: drop-shadow(2px 2px #f00);

まず基本的な設定としては、左から何px / 上から何px / 色を指定してください。
左右および上下に関してはマイナスの数値を指定することもできます。
また要素の色がついている部分に対して影を落とすので、半透明画像に対して影を落としたいといったときに使いやすいです。

filter: drop-shadow(左右の位置 上下の位置 ぼかし 色);

filter: drop-shadow(2px 2px 6px #f00);

ぼかし(blur)も設定することができます。
なおぼかしについてはマイナスの数値は指定することはできません。

filter: drop-shadow(左右の位置 上下の位置 ぼかし 色) drop-shadow(左右の位置 上下の位置 ぼかし 色) ...;

filter: drop-shadow(2px 2px 6px #f00)  drop-shadow(0px 10px 3px #0f0);

スペースで区切ることで複数の影を設定することができます。
なおdrop-shadowの特性上、shadowをかけたものにもshadowがかかります。

filter: drop-shadow(左右の位置 上下の位置 ぼかし 色) ...;

左右の位置や上下の位置、どれくらい影をぼかすかを設定することができます。
なおbox-shadowと違い色がついていない部分には影がつきません。
また複数shadowを設定するとかけた影に対して影が設定されます。