Filter プロパティ

最終更新：2026-09-13

filter Filter プロパティ

filter プロパティは、ぼかしや明るさ、コントラスト、グレースケールなど、Photoshop のフィルタのようなグラフィック効果を要素に適用します。要素の描画結果に作用し、要素とそのすべての子要素に影響するため、画像処理や視覚効果の一般的なツールとなっています。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

filter: none | <filter-function>+;
/* <filter-function> = blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */

⚙️ 値

値	タイプ	説明
`none`	キーワード	フィルタなし
`<filter-function>`	タイプ	blur、brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、opacity、saturate、sepia、url()

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
filter	✓ v53	✓ v12	✓ v35	✓ v9.1	✓ v40
すべての主要ブラウザーでサポート

ヒント： 複数のフィルタ関数を同時に、空白で区切って使用でき、順番に適用されます。

注意： filter は要素とそのすべての子要素に影響します。前景のコンテンツに影響を与えずに背景だけをぼかしたい場合は、backdrop-filter を使ってください。

❓ よくある質問

Qfilter と opacity はどちらも透明度を調整できますが、違いは何ですか？

Aopacity は要素全体の不透明度だけを調整し、層叠コンテキスト（stacking context）を作成します。filter: opacity(50%) はフィルタチェーンの一環であり、blur や saturate などの他のフィルタと組み合わせられます。どちらも GPU 合成を引き起こしますが、opacity には専用の最適化経路があります。単純な透明度の変更には opacity を、複合効果には filter を優先してください。

QCSS の filter プロパティは描画パフォーマンスや FPS に影響しますか？

Aはい。blur() や drop-shadow() のような負荷の高いフィルタは重いピクセル単位の計算を引き起こし、要素が多い場合や低スペック端末でコマ落ちする可能性があります。明るさ、コントラスト、彩度は比較的軽いです。推奨事項：フィルタは静的またはホバー時にのみ適用し、大きな要素を複数同時にぼかすのは避け、重要な場合はリアルタイムフィルタの代わりに事前生成した画像を使い、対象デバイスでテストしてください。

QCSS における filter と backdrop-filter の違いは何ですか？

Afilter は要素自身とそのすべてのコンテンツに適用されます（例：画像全体をぼかす）。backdrop-filter は要素の「後ろ」のコンテンツに適用され、フォグ状のガラス（frosted-glass）効果を生み出します。これはナビゲーションバーやモーダルの背景によく使われ、前景のテキストはくっきりしたままです。backdrop-filter はブラウザ対応がやや弱く、パフォーマンスコストも高いため、両者を組み合わせて洗練されたインターフェースの階層を作ることがよくあります。

Q画像をグレースケールにして、ホバー時に色を復元するにはどうすればよいですか？

Agrayscale() を使います。デフォルト状態で filter: grayscale(100%) とし、ホバー時に grayscale(0) または none に切り替え、さらに transition: filter 0.3s を追加して滑らかな色の変化にします。この「グレー→カラー」の非常に一般的なインタラクションは、追悼ページ、無効化されたアバター、画像ウォールのホバー効果に使われ、実装コストはほぼゼロです。