CSSフィルターとは何ですか?

CSS フィルターを使用すると、要素にぼかしや色の変化などのグラフィック効果を適用できます。これらは、画像、背景、境界線によく使用されます。

フィルターを使用すると、外部の画像編集ツールを必要とせずに、視覚効果を作成したり、画像を強化したり、独自のデザイン要素を作成したりできます。

サポートされている CSS フィルター プロパティ

• blur()- 要素にガウスぼかしを適用します。
• brightness()- エレメントの明るさを調整します。
• contrast()- エレメントのコントラストを調整します。
• grayscale()- 要素をグレースケールに変換します。
• hue-rotate()- 要素に色相の回転を適用します。
• invert()- 要素の色を反転します。
• opacity()- 要素の不透明度を調整します。
• saturate()- 要素を飽和または彩度下げます。
• sepia()- エレメントをセピア色に変換します。

フィルターの適用方法

このツールによって生成されたCSSコードを使用して、任意のHTML要素にフィルターを適用できます。方法は次のとおりです。

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

ブラウザの互換性

CSSフィルターは、Chrome、Firefox、Safari、Edge、Operaなどの最新のブラウザで広くサポートされています。ただし、Internet Explorerなどの古いブラウザはそれらをサポートしていません。