CSS「filter」プロパティで画像にフィルターを追加する

@ハクト 2022-09-23 15:17:37に投稿

CSSの「filter」プロパティを使用するとぼかしやグレースケールなど様々なフィルタ効果を画像に適用することができます。

画像の上に文字を配置する場合などに活用してみてください。

それでは以下の画像にフィルターをかけていきます。以下はフィルターを何もかけてない状態です。

フィルタープロパティの種類

img {
    filter:blur(3px);
}

img {
  filter: brightness(0.5);
}

img {
  filter: contrast(200%);
}

img {
  filter: drop-shadow(10px 10px　0 black);
}

img {
  filter: grayscale(100%);
}

img {
  filter: opacity(25%);
}

img {
  filter: saturate(30%);
}

img {
  filter: sepia(60%);
}

img {
  filter: hue-rotate(60deg);
}

img {
  filter: invert(80%);
}

img {
  filter: blur(2px) grayscale(90%);
}

css filter フィルター

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。