CSS filterで複数の効果

filter は多重がけできない？

例えば下記のような CSS でblurとdrop-shadowを２つ適用しようとしてもうまくいきません。

<img class="cat center dbl-filter" src="/images/site/cat.svg" title="SVGねこ" />  

/* ぼかしと影を同時適用できず、最後のフィルタが有効となる */  
.dbl-filter {  
  filter: blur(3px);  
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6));  
}  

最後に定義したフィルタが適用されます。
これはfilterという属性を 2 回定義したことと同じなので、CSS のルールに従って最後に定義されたものが有効になります。

1 つの filter 属性に複数の関数を渡す

上記の例は「複数の filter は定義できない」ということではなく、単に指定の仕方が悪いだけです。
１つのfilterに複数の関数を渡すことで問題なく多重がけできます。
下記は弱いblur効果と、青いdrop-shadow効果を同時にかけた例です。

<img  
  class="cat center dual-filter"  
  src="/images/site/cat.svg"  
  title="SVGねこ"  
/>  

/** 1つのfilterに複数定義する */  
.dual-filter {  
  filter: blur(3px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.6));  
}  

ちゃんと２つのフィルターをかけられました！

複数のクラスにエフェクトを分割して合成できる？

複数の関数を渡すことで目的は達成できましたが、よく使うエフェクトを「１クラス１エフェクトに分割して、合成する」ことはできませんでした。
クラスの記述前後を反対にしても、CSS 定義が後の方が優先されます。

<img  
  class="cat center blur-filter drop-shadow-filter"  
  src="/images/site/cat.svg"  
  title="SVGねこ"  
/>  
<img  
  class="cat center drop-shadow-filter blur-filter"  
  src="/images/site/cat.svg"  
  title="SVGねこ"  
/>  

.blur-filter {  
  filter: blur(3px);  
}  
.drop-shadow-filter {  
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6));  
}  

これができたら使いまわしやすかったのになぁ。

使いまわしするなら、sassとかlessとかで関数化すると良さそうです。

謝辞

ねこ画像 by 素材 Library.com, Thanks!!