CSS | filterで複数の効果を反映させる方法

2020-09-10CSS フィルター,CSS

CSSのfilterは、ひとつのfilterプロパティに複数の効果を記述して複数のフィルター効果を反映させることが可能です。

例えば以下のように複数のフィルター効果を反映させる記述が可能です。

セピアとぼかし

filter: sepia(1) blur(2px);

グレースケールと透過とぼかし

filter: grayscale(50%) opacity(50%) blur(2px);

複数のfilter効果を反映させる動作サンプル

複数のfilter効果を反映させた場合の動作サンプルです。

See the Pen CSS multiple effects with filter by yochans (@yochans) on CodePen.

サンプルコード

<div class="container">
<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
</div>

.container img{
	width:300px;
	filter: grayscale(60%) opacity(80%) blur(1px);
}