エフェクト
filter
filter は、ぼかし・明るさ・色相の回転などの画像効果を、要素の描画結果（子要素も含む）にまとめてかけます。空白で区切って複数の関数を並べられます。
構文none | <filter-value-list> …
none | <filter-value-list>
<filter-value-list> = [ <filter-function> | <url> ]+
<filter-function> = <blur()> | <brightness()> | <contrast()>
| <drop-shadow()> | <grayscale()> | <hue-rotate()>
| <invert()> | <opacity()> | <saturate()> | <sepia()>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 24px;
filter: hue-rotate(90deg) drop-shadow(0 8px 12px #0f172a40);
}コントロール
hue-rotate(90deg)
<angle>
drop-shadow(0 8px 12px #0f172a40)
offset-x
offset-y
blur-radius
color
関数を追加
解説
関数の種類
blur()はぼかしです。半径を長さで書き、%は使えません。brightness()contrast()saturate()は明るさ・コントラスト・彩度です。1（100%）がそのままで、小さくすると弱く、大きくすると強くなります。grayscale()sepia()invert()opacity()は効き具合を0〜1（0%〜100%）で書きます。1を超える値は1として扱われます。hue-rotate()は色相を角度ぶん回します。360degで一周して元に戻ります。- 引数を省略すると、
blur()は0、hue-rotate()は0deg、それ以外は1になります。そのためgrayscale()などは省略すると効果がいちばん強くかかります。
書いた順にかかる
関数は左から順にかかります。たとえば影を付けてから白黒にする（drop-shadow(0 8px 12px red) grayscale(1)）と影も灰色になりますが、 順番を入れ替えると影は赤いままです。コントロールのカードを上下に並べ替えて確かめられます。
drop-shadow() と box-shadow の違い
drop-shadow() は描画されたピクセルの形に沿って影を落とすので、透明な部分のある画像や切り抜かれた形にもぴったり付きます。box-shadow と違い、広がり（spread）と inset は指定できません。コードの background を radial-gradient(circle, #77a7d7 40%, transparent 41%) に書き換えると、影が円に沿うのがわかります。
気をつけること
none以外を指定すると、その要素が重なり順の新しいまとまり（スタッキングコンテキスト）と、position: fixedの子孫の基準になります。モーダルなどの固定配置が急にずれたときは、親のfilterを疑ってください。- 要素の後ろにあるものをぼかしたいときは、
filterではなくbackdrop-filterを使います。