CSSフィルタージェネレーター

使い方

1. フィルタースライダーを調整: スライダーを使ってぼかし、明るさ、コントラスト、彩度、色相回転、不透明度、グレースケール、セピア、反転を制御します。
2. リアルタイムでプレビュー: スライダーを動かすと、サンプル画像または要素が瞬時に更新されます。
3. CSSをコピー: 完全なfilterプロパティ値(例: filter: brightness(1.2) contrast(1.5) saturate(0.8))は、スタイルシートに貼り付ける準備ができています。

なぜCSSフィルタージェネレーターを使うのか?

CSSフィルターを使用すると、Photoshopや画像編集ソフトウェアなしで、ブラウザ内で画像処理効果(ぼかし、コントラスト、明るさ、色のシフト)を直接適用できます。画像、動画、HTML要素で動作します。filterプロパティチェーンを手動で構築するには、正確な関数名と有効な値の範囲を知る必要があります。このジェネレーターは、必要な見た目を正確に得るための直感的なスライダーと視覚的フィードバックを提供します。

機能

• すべてのCSS filter関数: blur、brightness、contrast、saturate、hue-rotate、opacity、grayscale、sepia、invert、drop-shadow。
• ライブプレビュー: サンプル画像または独自の画像で変更をリアルタイムに確認します。
• 値の検証: スライダーは各フィルター関数の有効な範囲を強制します。
• 個別リセット: 他のフィルターに影響を与えずに、単一のフィルターをデフォルト値にリセットします。
• 結合出力: 選択されたすべてのフィルターが1つのfilterチェーンに結合されます。

よくある質問

CSSフィルターを動画に適用できますか?

はい。CSSのfilterプロパティは、<video>、<img>、<div>、<canvas>を含むすべての要素で動作します。動画に適用すると、フィルターは再生中にリアルタイムでレンダリングされます。

filterとbackdrop-filterの違いは?

filterは、要素自体とそのすべての子に効果を適用します。backdrop-filterは、要素の後ろ(下)にあるコンテンツに効果を適用します, フロステッドガラス効果によく使用されます。

CSSフィルターはパフォーマンスに影響しますか?

ぼかしや複雑なコンポジションを伴うフィルターはGPUに負荷をかける可能性があります。アニメーション化されたフィルターの場合、要素が独自のコンポジットレイヤーにあることを確認してください(ヒントとしてtransform: translateZ(0)を追加)。画像とアイコンの静的フィルターは、影響が最小限です。

CSS filterが実際に行うこと

CSS の filter プロパティは、ブラウザが画面にペイントする前に要素とその子要素にグラフィカル効果 (ぼかし、コントラスト調整、色シフト、ドロップシャドウ) を適用します。処理は完全にブラウザのレンダリングパイプライン内で行われ、通常はGPU加速され、JavaScriptは関与しません。効果は視覚のみです: 基礎となるHTML、画像が参照するファイル、レイアウトはすべて変更されません。filter: grayscale(1) で表示される写真は、ファイル内では元の色を保持しています; ブラウザは表示時のみグレースケールに変換します。

CSS filter は10個の関数を公開しています: ガウスぼかし用の blur(px)、トーン調整用の brightness(n) と contrast(n)、色の強度用の saturate(n)、カラーホイールをシフトする hue-rotate(deg)、透明度用の opacity(n)、脱彩効果用の grayscale(n) と sepia(n)、負の出力用の invert(n)、そして形状を認識する影用の drop-shadow(...) (box-shadow とは異なり、drop-shadow は透明度を含む実際にレンダリングされた形状に従い、切り抜きエッジを持つアイコンやPNG画像の影に理想的)。関数はチェーンされます: filter: brightness(1.2) contrast(1.3) saturate(0.9) は3つすべてを順に適用します。

なぜこれが現代のウェブデザインで重要か: 10年前、デザインの一貫性のために画像の明るさ、色相、または彩度を調整するには、Photoshopですべての画像を前処理して再エクスポートする必要がありました。CSS filter は同じ調整を実行時に、非破壊的に適用させます。1つの画像を提供して、テーマ、ホバー状態、またはユーザーの好みに基づいて異なる方法で提示できます。アクセシビリティのためにフィルターを使用することもできます: プレースホルダーとしての反転グレースケール写真、または高コントラストテキストの読みやすさのための暗くした画像オーバーレイ。トレードオフは一部のフィルター (特にblur) のパフォーマンスと、フィルターが子要素にも影響することで、予期せずカスケードする可能性があります。

このツールが内部でどのように動くか

ツールの各スライダーは単一のフィルター関数にバインドされています。スライダーを動かすと、JavaScript が値を読み取り、その値を持つフィルター関数文字列を構築し (例えば brightness(1.4))、すべてのアクティブな関数を1つの filter CSS 文字列に連結します。その文字列はプレビュー画像のインラインスタイルとして適用され、ブラウザが新しいフィルターで再描画するときに即座の視覚的フィードバックを生成します。JavaScript で画像データを処理することはありません: 実際のピクセルレベルの計算はブラウザのレンダリングエンジン内、通常GPUで行われます。

コードボックスに表示される生成されたCSSは、プレビューに適用されるのと同じ文字列です。「CSS をコピー」をクリックすると、ツールはモダンな navigator.clipboard.writeText() API を使用してその文字列をクリップボードに書き込みます。文字列は任意の要素のスタイル属性やスタイルシート内の任意のクラス宣言に貼り付ける準備ができています。ツールはまた独自の画像の読み込みもサポートします: ファイルを選択するとブラウザ内で一時的な blob: URL になり、どこにもアップロードされず、フィルターは実際の画像でプレビューされるので、コンテンツの正確な外観を調整できます。

リセット動作はフィルターごとです: 各スライダーには独自のリセットボタンがあり、そのフィルターだけを効果なしの値 (乗数の場合は1、hue-rotateの場合は0deg、blurの場合は0px) に戻します。「すべてリセット」ボタンはすべてのスライダーを同時に中立に戻します。ツールの状態はメモリ内にのみ存在します; ページをリロードするとフィルターの組み合わせは消えます。サーバーは選択したフィルター値を保存せず、分析はあなたが試す組み合わせを追跡しません。ツールはステートレスで広告でサポートされるCSSプレイグラウンドです。

CSS フィルターの簡単な歴史

• SVGフィルタープリミティブ、2001年。SVG 1.0 (W3C 勧告、2001年9月) は包括的なフィルターシステムを定義します: feGaussianBlur、feColorMatrix、feConvolveMatrix など多数。SVG フィルターモデルは強力ですが冗長で、HTML 要素に SVG フィルターを適用するにはインライン SVG を参照する filter: url(#id) が必要で、HTML ファーストのワークフローでは広く採用されませんでした。
• CSS Filter Effects Module Level 1、2014年。W3C は Filter Effects Module Level 1 (2014年12月) を公開し、インライン SVG を必要としない簡略化されたショートハンドフィルター関数 (blur、brightness、contrast など) を導入します。これらは95%のケースで最も一般的な画像処理ニーズに合致し、SVG フィルターよりも劇的に書きやすいです。
• ブラウザサポートが臨界質量に達する、2015年。Chrome 53 (2015) と Firefox 35 (2015) はプレフィックスなしのフィルターサポートを出荷します; Safari はバージョン6 (2012) からプレフィックス付きサポートを持っています。2015年までに、CSS filter は本番サイトで広く使用可能です。デザイナーはホバー効果、画像の正規化、装飾的な処理に大規模でフィルターを使い始めます。
• backdrop-filter が登場、2017年から2024年。Safari 9 (2015) は曇りガラス効果のために -webkit-backdrop-filter を導入します。Chromium は Chrome 76 (2019年7月) でプレフィックスなしの backdrop-filter を出荷します。Firefox はバージョン103 (2022年7月) まで保留します。iOS スタイルの「曇りナビゲーションバー」がデフォルトの現代的な UI パターンになります。
• ダークモードがフィルター採用を推進、2019年。ダークモードのデザイントレンド (Apple の macOS Mojave 2018、Android 10 2019、iOS 13 2019、ブラウザの prefers-color-scheme 2019) が invert-and-hue-rotate 「自動ダークモード」CSS のためのフィルター使用を加速させ、単一の filter: invert(1) hue-rotate(180deg) ルールがライトモードサイトを再設計なしで通用するダークモードビューに変えます。
• SVG フィルターの複雑さが CSS 経由で戻る、2024年以降。CSS Filter Effects Module Level 2 (ドラフト) は、便利なショートハンド関数と SVG フィルタープリミティブのフルパワーの間のギャップを埋める、新しい関数とインライン SVG なしでカスタムフィルターパイプラインを構成する機能を提案します。ブラウザサポートはまだ2025年を通じてロールアウト中です。

実世界のワークフロー

• ブランド一貫性のある画像の正規化。多くの写真家やストックプロバイダーから画像を調達するサイトは、一貫性のない彩度、コントラスト、明るさになります。すべての画像に統一されたCSSフィルター (filter: saturate(0.85) contrast(1.05) brightness(0.95)) を適用すると、各ファイルを前処理することなくそれらすべてが同じカラーパレットに入ります。特定の画像を目立たせたいときには、その画像のフィルターを逆にします。
• ホバーとインタラクション状態。filter トランジションを使用するホバー効果は洗練され軽量に感じられます。filter: grayscale(0.5) でレストし、filter: grayscale(0) でホバーするカードイメージは、インタラクションへの微妙な招待を作ります。レストでの filter: brightness(0.9) とホバーでの brightness(1.1) を持つ画像のサムネイルは、2つの画像ファイルを必要とせずに同じことをします。
• backdrop-filter を使用した曇りガラス UI。半透明の背景の上に backdrop-filter: blur(20px) を使用するモーダルオーバーレイ、スティッキーナビゲーションバー、ツールチップポップオーバーは iOS スタイルの曇りガラス効果を生成します。これは現代のマーケティングサイトでは今や期待されています; オーバーレイ自体ではなく、オーバーレイの後ろにあるものをぼかしたいので filter は適用しません。
• 動的テーマとダークモード。安価なダークモード: メディアクエリやトグルで起動された filter: invert(1) hue-rotate(180deg) を持つコンテナでサイトをラップします。これはほとんどの色を保持しながら、暗いテキストを明るく、明るい背景を暗くに変換します。これは2つのテーマを設計せずにダークモード要件の80%を処理する素早い勝利です。実際の画像は反転を取り消すためにネストされた filter: invert(1) hue-rotate(180deg) で除外する必要があります、そうでないと写真は奇妙に見えます。
• アクセシビリティツールと高コントラストモード。視覚障害のあるユーザーはブラウザレベルのフィルター (Chrome の高コントラスト拡張、OS レベルの反転) を適用できますが、デザイナーはサイトレベルのフィルタートグルも提供できます: 弱視ユーザーのためにページ全体に filter: contrast(2) を適用するボタン。WebAIM と WCAG はこれを要求しませんが、いくつかのサイトが追加する低コストのアクセシビリティの礼儀です。
• 芸術的な写真処理。セピア調、ヴィンテージルック、青写真の写真効果、その他の芸術的処理はフィルター関数を組み合わせます: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) は1つの宣言で涼しい色調のヴィンテージルックを生成します。画像エディタのプリセットと比較して、CSS filter は非破壊的で再エクスポートなしでライブで調整可能です。

よくある落とし穴とその意味

• Blur は高価なフィルター。フィルター関数の中で、blur() は GPU 集約的で、特に大きな半径 (20px 以上) で大きな要素に適用される場合です。blur をアニメートしたり、多くの要素に同時に適用したりすると、フレームレートが顕著に低下する可能性があります。スティッキー曇りナビゲーションバーの場合、blur は小さな領域をカバーし問題なく動作します; フルスクリーンモーダル blur の場合、低スペックデバイスでは短いスタッターが予想されます。他のフィルター (contrast、brightness、saturate) は現代の GPU でほぼ無料です。
• フィルターはすべての子孫に影響します。コンテナに filter を適用すると、その内部のすべての子要素に影響します。コンテナで filter: grayscale(1) でカードをラップすると、内部のテキストもグレースケールになり (テキストはすでにモノクロームなので通常は何も変わりません)、色付きの子要素 (アイコン、バッジ) はその色を失います。特定の子要素だけをフィルタリングするには、親ではなく個別にフィルターを適用してください。
• 低コントラストは読みやすさを損なう。内部にテキストを持つカードで コントラストを下げる (filter: contrast(0.5)) と、テキストが読みにくくなり、通常のテキストの WCAG AA 4.5:1 コントラスト比を下回ることがよくあります。コントラストを下げるフィルターを慎重に適用してください; 上にあるテキストが読みやすいままであることを確認します。装飾のみの要素 (背景画像、区切り) の場合、コントラスト低減は問題ありません。
• フィルターはヒット領域を変更しません。clip-path とは異なり、CSS filter は要素のクリック可能領域を変更しません。filter: blur(5px) を持つボタンは柔らかくぼやけて見えますが、元の長方形全体でまだ完全にクリック可能です。これは通常望ましいですが、「ghosted」または「disabled-looking」要素がクリックでまだトリガーされるとき驚くことがあります。実際にインタラクションを無効にするには filter を pointer-events: none と組み合わせてください。
• Safari は backdrop-filter に -webkit- プレフィックスが必要。基本の filter プロパティはすべての現代のブラウザでプレフィックスなしです。しかし backdrop-filter は依然として Safari (新しいバージョンを含む) で -webkit-backdrop-filter プレフィックスを必要とします。クロスブラウザの曇りガラス効果の場合、-webkit-backdrop-filter と backdrop-filter の両方を同じ値で宣言してください。自動プレフィクサーがこれを処理します; 手書きで CSS を書く場合、プレフィックスを覚えておいてください。
• フィルターチェーンのアニメーションはジャンプします。フィルターチェーンが同じままの場合 (例えば blur(0px) から blur(10px) へのトランジション)、filter での CSS トランジションは滑らかに補間します。しかし、トランジションの途中で関数を追加または削除する (例えば blur(0px) から blur(10px) brightness(1.2) へのトランジション) と急激にスナップします。スムーズなマルチフィルタートランジションの場合、適切なベースライン値 (brightness(1) がデフォルト) を持つ開始と終了の両方の状態でフィルターをすべて宣言してください。

プライバシー: すべてはブラウザで起こる

CSS ジェネレータツールには2つの形があります: クライアントサイド JavaScript を実行する単純な HTML ページ (プライベート、高速) と、プロジェクトを保存するクラウドエディタ (協調的だがプライバシーのトレードオフあり)。このツールは最初の種類です。スライダーの値、生成された CSS、そしてプレビュー用にアップロードした画像でさえ、完全にブラウザセッション内に留まります。ページをリロードすると、最初に CSS をコピーするかスクリーンショットを保存しない限り状態は消えます。

「独自の画像をアップロード」機能はプライバシーに関する注釈に値します: ファイルを選択すると、ブラウザはメモリを指すローカルな blob: URL を作成し、プレビューはフィルターが適用されたあなたの画像を表示します。サーバーへのリクエストはありません。アップロード中にブラウザのネットワークタブを開いてください; アウトバウンドトラフィックはゼロです。画像はあなたのブラウザタブのメモリ内にのみ存在し、タブを閉じると消去されます。機密画像 (専有のデザイン、医療スキャン、NDA で保護されたスクリーンショット) の場合、これが重要なプライバシー特性です。

別のツールが正しい選択になるとき

• 永続的な編集には Photoshop または Lightroom。CSS filter は表示時のみです: 基礎となる画像ファイルは変更されません。実際の画像ファイルにそれらの調整を組み込みたい場合 (より小さいファイルサイズ、より速いページ読み込み、古いブラウザでフィルタリングされていないフォールバックのリスクがない)、Photoshop、Lightroom、GIMP、または Affinity Photo で画像を編集してください。CSS filter は動的表示用です; 画像エディタは永続的な処理用です。
• 1回限りのバッチ処理には Image Filters。私たちの Image Filters ツールは同様のフィルター効果を適用しますが、フィルターが組み込まれた状態でダウンロード可能な PNG/JPG を生成します。ポートフォリオ、ソーシャルメディアセット、またはアセットライブラリのために多くの画像を一貫して処理する場合、そのワークフローはランタイムで CSS フィルターを適用するよりも速いです。両方のツールが異なる使用ケースに対応します。
• 複雑な効果には SVG フィルター。CSS filter のショートハンドはほとんどのニーズをカバーしますが、すべてではありません。波状の歪み、カスタム畳み込みカーネル (エッジ検出、エンボス処理)、feTurbulence ノイズパターン、変位マップ: すべてインライン SVG プラス filter: url(#myFilter) 経由の SVG フィルタープリミティブが必要です。SVG フィルターの作成は難しいですが、ショートハンド CSS filter では生成できない効果のロックを解除します。
• テーマ用の CSS カスタムプロパティ。フィルターを使用する「invert dark mode」トリックには制限があります: 写真が間違って見え、色がシフトし、パフォーマンスが低下する可能性があります。本番品質のダークモードには、2つの異なるテーマセットを持つ CSS カスタムプロパティ (--bg-color、--text-color) がよりクリーンです。フィルターベースのダークモードは素早い勝利であり、洗練された解決策ではありません。

その他のよくある質問

CSS filter の変更をスムーズにアニメートできますか?

はい、注意事項があります。filter プロパティは CSS でアニメート可能で、同じ順序で同じ関数を持つ2つのフィルターチェーン間のトランジションはスムーズに補間します (blur(0px) brightness(1) から blur(10px) brightness(1.5) へが機能します)。トランジションの途中で関数を追加または削除すると急激にスナップします。スムーズなマルチフィルターアニメーションの場合、特定のフィルターを適用したくない場合は中立値 (brightness(1)、saturate(1)、blur(0px)) を使用して、開始と終了の両方の状態でトランジションしたいすべての関数をリストしてください。

CSS filter は背景画像で機能しますか?

はい。CSS filter は背景、コンテンツ、子要素を含む要素全体に適用されます。前景コンテンツではなく背景画像だけをフィルタリングしたい場合、典型的なアプローチは背景用に別の子要素 (例えば、位置決めされた ::before 疑似要素) を使用してそれにフィルターを適用し、コンテンツをフィルタリングされていない兄弟として上に配置することです。透明な要素の後ろに見えるものをフィルタリングしたい場合は、backdrop-filter プロパティも便利です。

CSS フィルターは検索エンジンによってインデックスされますか?

CSS フィルターは純粋に視覚的で、HTML コンテンツを変更しません。検索エンジンは、フィルターが適用されていないかのように、基礎となるコンテンツ (画像 alt テキスト、周囲のテキスト) をインデックスします。filter: grayscale(1) のグレースケール画像は、ファイルと alt テキストに基づいて元のカラー画像としてまだインデックスされます。これは一般的にあなたが望むものです: SEO やスクリーンリーダーへのフィルター副作用はありません。

なぜ drop-shadow は box-shadow と異なって見えるのですか?

Box-shadow は要素の長方形のボックスの周りに影を描画し、透明性を無視します。Drop-shadow (filter) は透明な領域を含む実際にレンダリングされた形状に従う影を描画します。切り抜きエッジを持つアイコン SVG または透明性を持つ PNG の場合、drop-shadow は可視のアウトラインに一致する形状認識の影を生成します。同じ要素の Box-shadow はバウンディングボックスの周りに長方形の影を表示します、それは間違って見えます。形状認識の影には drop-shadow、長方形要素には box-shadow を使用してください。

opacity と filter: opacity() の違いは何ですか?

ほとんどのブラウザでは視覚的に同一の結果を生成します。技術的な違い: opacity はトップレベルのプロパティですが、filter: opacity() はフィルターチェーンの一部であり、他のフィルターと構成します。filter: blur(5px) opacity(0.5) がある場合、両方が単一の GPU 操作として一緒に適用されます。フィルターチェーン外で opacity を使用すると、ほとんどの場合同じように動作します。スタンドアロンの透明度には opacity を維持してください; 他のフィルターとチェーンする場合のみ filter: opacity() を使用してください。

すべてのフィルターをすばやくリセットできますか?

はい。filter: none を設定すると、1つの宣言ですべてのフィルターを削除します。これはリセットする最もクリーンな方法であり、特に hover-out ですべてのフィルター効果を削除したいホバー状態に最適です。あるいは、各フィルター関数を中立値に設定します: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) は filter: none と機能的に同等ですが、より冗長です。