CSSフィルター完全ガイド：blur、grayscale、hue-rotateの使い方と実践例
📷 Denys Nevozhai / PexelsCSSフィルター完全ガイド：blur、grayscale、hue-rotateの使い方と実践例
CSS filterプロパティを使えば、画像編集ソフトなしでblur、グレースケール、明度調整、色相回転などを純粋なCSSで実現できます。各フィルターの実用的な活用法と性能のポイントを解説します。
CSS filterプロパティは、多くの開発者が一度見て「面白い」と思い、その後しばらく忘れてしまうプロパティの一つです。そして画像編集ソフトで一時間作業した後に、CSSの数行で解決できたと気づくことになります。
filterプロパティは、blur、grayscale、brightness、contrast、sepia、hue-rotateなどのグラフィック効果を、画像ファイルを変更したりCanvas APIを使ったりすることなく、純粋なCSSで適用します。画像だけでなくすべてのHTML要素に作用し、複数の効果を組み合わせたりtransitionでアニメーション化したりすることも簡単です。
CSS Filter Generatorを使えば、各値をスライダーで視覚的に調整しながらリアルタイムでプレビューし、そのままCSSをコピーできます。
filterプロパティの仕組み
技術的には、CSS filterはSVGフィルター効果を要素のレンダリング出力に適用します。ただし、SVGを直接扱う必要はありません。複数のフィルターはスペースで区切られ、左から右の順に適用されます：
img {
filter: grayscale(1) brightness(1.1);
}
重要な点として、filterは要素とそのすべての子要素に適用されます。カードにfilter: blur(4px)を設定すると、カード内のテキストも含めてすべてがぼやけます。背景画像だけをぼかしたい場合は別のアプローチが必要です。
各フィルターと実際の活用事例
blur()
最も視覚的に目立つフィルターです。ピクセル単位でガウシアンブラーを適用します。
.background-image {
filter: blur(8px);
}
活用事例：ヒーロー背景画像のブラー処理。 背景画像だけぼかしてコンテンツを鮮明に保ちたい場合：
.hero-bg {
position: absolute;
inset: 0;
background-image: url('/hero.jpg');
background-size: cover;
filter: blur(6px);
transform: scale(1.05); /* ブラーの端が見えないように */
z-index: 0;
}
scale(1.05)のトリックにより、ブラー処理された端が画面に表示されることを防げます。
grayscale()
要素の色をグレースケールに変換します。1が完全なグレースケール、0が元の色です。
活用事例：無効状態の表現。 不透明度だけでは伝わりにくい場合、grayscaleと組み合わせると無効状態をより明確に伝えられます：
.product-card.disabled img {
filter: grayscale(1);
opacity: 0.7;
}
活用事例：hoverでカラー表示。 デフォルトはグレースケール、hoverでカラーに切り替わる効果は、ポートフォリオやチーム紹介ページでよく使われます：
.team-photo {
filter: grayscale(1);
transition: filter 0.4s ease;
}
.team-photo:hover {
filter: grayscale(0);
}
brightness()とcontrast()
brightness()は明度を調整します。1が元の状態、1未満で暗くなり、1超で明るくなります。contrast()はコントラストを調整します。
二つを組み合わせることで、画像の雰囲気を大きく変えられます：
/* 強くパンチの効いたルック */
.editorial-image {
filter: brightness(1.05) contrast(1.4);
}
/* ソフトでヴィンテージなルック */
.vintage-image {
filter: brightness(1.1) contrast(0.85) sepia(0.3);
}
活用事例：ボタンのインタラクションフィードバック。
.cta-button {
transition: filter 0.15s ease;
}
.cta-button:hover {
filter: brightness(1.1);
}
.cta-button:active {
filter: brightness(0.9);
}
sepia()
すべての色に温かみのある茶色がかった色調を加え、古い写真のような雰囲気を作り出します。
.retro-photo {
filter: sepia(0.8) brightness(1.05) contrast(0.9);
}
CSSで完結するため、別の画像ファイルなしにテーマ切り替えが可能です。
hue-rotate()
すべての色の色相を指定した角度だけ回転させます。彩度と明度を保ったまま色相だけ変わるのが特徴です。
活用事例：1つの画像で複数のテーマを実現。
.theme-blue .logo-icon { filter: hue-rotate(0deg); }
.theme-purple .logo-icon { filter: hue-rotate(60deg); }
.theme-green .logo-icon { filter: hue-rotate(120deg); }
活用事例：レインボーアニメーション効果。
@keyframes rainbow {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
.rainbow-element {
animation: rainbow 4s linear infinite;
}
drop-shadow()
要素の実際の形状に沿って影を適用します。box-shadowとの大きな違いは、透明PNGやSVGなど、長方形でない形状でも正しく機能する点です。
img {
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}
透明背景のPNGにbox-shadowを使うと長方形の影になってしまいますが、drop-shadow()はその問題を解決します。
invert()
すべての色を反転させます。ダークモードのアイコン対応に便利です：
@media (prefers-color-scheme: dark) {
.icon {
filter: invert(1);
}
}
モノクロアイコンには信頼できる方法です。
filterとbackdrop-filterの違い
混同されやすい二つのプロパティです：
filter：要素自体とその内容に効果を適用します。backdrop-filter：要素の背後にある領域に効果を適用します。要素自体は通常通りレンダリングされます。
/* フロストガラスパネル */
.glass-panel {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari用 */
}
-webkit-backdrop-filterは2026年初頭時点でSafariがまだ必要としています。常に一緒に記述してください。
filterのアニメーション
フィルターはtransitionとanimationでアニメーション化できます：
/* カラーreveal効果 */
.portfolio-item img {
filter: grayscale(1) brightness(0.9);
transition: filter 0.4s ease;
}
.portfolio-item:hover img {
filter: grayscale(0) brightness(1);
}
/* blur-inの登場効果 */
@keyframes blurIn {
from {
filter: blur(12px);
opacity: 0;
}
to {
filter: blur(0px);
opacity: 1;
}
}
.hero-content {
animation: blurIn 0.8s ease-out forwards;
}
パフォーマンスの考慮事項
CSS filterはGPUアクセラレーションを使用しますが、注意点があります：
- blur()が最もコストが高いです。半径が大きく要素が大きいほど負荷が増します。
- 大きな要素でのfilterアニメーションは中級のモバイル端末でフレームドロップを引き起こす可能性があります。
- フィルターの組み合わせはコストが積み重なります。チェーン内の各フィルターが順番に適用されます。
will-change: filterは必要な場合のみ使用してください。GPUメモリを消費します。
まとめ
CSS filterは画像編集機能のように見えるため、スタイリングツールとして認識されにくいことがあります。しかし、スタイリングの基本要素として考えると活用範囲が広がります。
無効状態のためのgrayscaleパターン、形状に沿うdrop-shadow、テーマ適用のためのhue-rotate、フロストガラスのためのbackdrop-filter——これらはすべて、モダンなCSSで実用的に使えるテクニックです。
CSS Filter Generatorで実際の画像に各フィルターがどのような影響を与えるか、視覚的に確認してみてください。