filterとbackdrop-filterの使い分け

サンプル

//html

<div class="gradient-conic">

	<span class="filter">filter</span>

</div>

<div class="gradient-conic">

	<span class="backdrop-filter">backdrop-filter</span>

</div>



//css

.gradient-conic

{

	background:conic-gradient(tomato 0% 25%, skyblue 25% 50%, tomato 50% 75%, skyblue 75% 100%);

	padding-inline:2rem;

	padding-block:2rem;

	text-align:center;

}

.gradient-conic > span

{

	width:50%;

	display:block;

	margin-inline:auto;

	margin-block:2rem;

	padding-inline:2rem;

	padding-block:2rem;

	background:rgba(250,250,250,0.1);

	font-weight:bold;

	font-size: 3rem;

}

.gradient-conic > .filter

{

	filter:blur(2px) hue-rotate(120deg);

}

.gradient-conic > .backdrop-filter

{

	backdrop-filter:blur(2px) hue-rotate(120deg);

}
filter
backdrop-filter

使い分け

filterはブロック単位で効果がかかるがbackdrop-filterは親要素を自要素でクリップした範囲内に対して適用される。

それぞれのfilterに対しての値は下記となり、複数をミックスして指定することもできる。