CSSのfilterプロパティを使うと、画像や要素に対してぼかしや明るさ調整、グレースケールなどの視覚効果を手軽に追加できます。従来は画像編集ソフトで加工していたような表現も、CSSだけで実装できるためデザインの幅が広がります。ここでは代表的なフィルターの種類と実用的な使い方をまとめます。
filterプロパティの基本
filterは要素に対して一つ以上のフィルター効果を適用します。複数の効果を空白区切りで連続指定することも可能です。
.example {
filter: blur(5px) brightness(1.2) contrast(90%);
}
よく使われるフィルターの種類
/* ぼかし */
.blur {
filter: blur(4px);
}
/* 明るさ */
.brightness {
filter: brightness(1.5); /* 1以上で明るく、0で真っ黒 */
}
/* コントラスト */
.contrast {
filter: contrast(120%); /* デフォルト100% */
}
/* グレースケール */
.grayscale {
filter: grayscale(100%); /* 100%で完全モノクロ */
}
/* セピア調 */
.sepia {
filter: sepia(80%);
}
/* 色相回転 */
.hue-rotate {
filter: hue-rotate(90deg);
}
/* 彩度 */
.saturate {
filter: saturate(200%); /* 2倍の鮮やかさ */
}
/* 反転 */
.invert {
filter: invert(100%);
}
/* 透明度 */
.opacity {
filter: opacity(50%);
}
複数効果を組み合わせる
複数のフィルターを同時に適用すると、デザインの幅が大きく広がります。
.custom {
filter: grayscale(100%) brightness(1.2) blur(2px);
}
hoverでフィルター効果を付与する
画像のホバー時にフィルターを適用すると、視覚的なアクセントになります。
img {
transition: filter 0.3s;
}
img:hover {
filter: brightness(1.2) saturate(150%);
}
backdrop-filterとの違い
filterは要素自体に効果をかけるのに対し、backdrop-filterは「背後にある要素」に効果を適用します。ガラス風の半透明UIなどを実現するのに便利です。
.glass {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
注意点
– 古いブラウザではサポートが不十分な場合があるため、必要に応じてプレフィックス（-webkit-filter）を付与する
– 複雑なフィルターや大きな画像への適用はレンダリングコストが高く、パフォーマンスに影響する可能性がある
– デザイン面で使いすぎると可読性やUXを損なう場合があるため、要所で効果的に使う
まとめ
CSSのfilterプロパティを使えば、画像加工やビジュアル演出を簡単に実装できます。blurやbrightnessなどの基本効果から、hue-rotateやbackdrop-filterを組み合わせることで、モダンなUIや印象的なビジュアル表現が可能になります。効果的に活用して、サイト全体のデザイン性を高めていきましょう。
