filter／backdrop-filter

2024.03.29

filter

CSSの filter プロパティはその名前通り、指定した要素にフィルター効果を適用する。
filter プロパティには1つまたは複数の関数を値として指定する。複数指定する際は半角スペースで区切りで繋げる。初期値にはnoneが指定されている。

<div class="box">
  <img src="sample.jpg" alt="">
</div>
.box {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin-top: 100px;
}
.box img {
  max-width: 100%;
  filter: brightness(0.8) contrast(120%);
}

指定できる関数は、以下の10種類用意されている。

関数名効果記述例
blurぼかしfilter: blur(5px);
brightness明度filter: brightness(50%);
contrastコントラストfilter: contrast(50%);
drop-shadowドロップシャドウfilter: drop-shadow(3px 3px 5px #000);
grayscaleグレースケールfilter: grayscale(50%);
hue-rotate色相環filter: hue-rotate(120deg);
invert階調の反転filter: invert(40%);
opacity不透明度filter: opacity(30%);
saturate彩度filter: saturate(30%);
sepiaセピアfilter: sepia(50%);

backdrop-filter

backdrop-filterは、要素の背後領域にぼかしなどのグラフィック効果を与えられるCSSプロパティである。
有名なものだと、iPhoneやiPadに採用されているすりガラス風加工のグラスモーフィズムなどがある。
背後すべてに適用されるため、一部が透明な要素や、背景がある前提で使用するプロパティである。
プロパティ値の名称や効果は上記filterプロパティと同様。

backdrop-filterは、Safariのみ -webkit- のプレフィックスを付けることで対応可能。

filterとbackdrop-filterの違い

filterとbackdrop-filterの違いはフィルター効果を適用できる対象にある。

  • filter：指定要素自体に効果が適用する
  • backdrop-filter：指定要素の背後領域に効果が適用する
inserted by FC2 system