ZeroTool Workbench
CSS フィルタージェネレーター
CSSフィルター効果をビジュアルで生成。blur・brightness・contrast・grayscale・hue-rotate・invert・opacity・saturate・sepiaをスライダーで調整。カスタム画像アップロード対応。無料オンラインツール。
WeChat でスキャンしてシェア
使い方
- ぼかし・明るさ・コントラスト・グレースケール・色相回転・反転・不透明度・彩度・セピアの9つのスライダーを調整すると、プレビュー画像にリアルタイムで効果が反映されます。
- 画像をアップロードをクリックして、デフォルトのプレビューを自分の画像（JPEG・PNG・WebP・SVGなど、5MB以内）に置き換えられます。画像はブラウザ内で完全に処理され、サーバーにアップロードされることはありません。
- 各スライダーのリセットボタンで、そのフィルターだけをデフォルト値に戻せます。すべてリセットで一括リセットも可能です。
- コピーボタンで生成したCSSをコピーします。デフォルト値と異なる関数のみが出力され、すべてデフォルトの場合は
filter: none;となります。
生成されるCSSについて
出力は .element クラスに filter プロパティを設定します。
.element を自分のセレクターに置き換えて、画像・div・canvas・video・疑似要素など
任意のHTML要素に適用できます。フィルター関数は順番に評価されるため、
blur(2px) brightness(120%) は先にぼかしてから明るくします。関数の順序が異なると結果も変わる場合があります。
代表的な活用シーン
CSSフィルターは、画像ホバーエフェクト（通常時グレースケール・ホバー時カラー）、ダークモード画像調整 （反転＋色相回転）、ローディングスケルトン（グレースケール＋明るさ）、毛ガラス背景（背景にぼかし適用）、 セピア・高コントラストなどの写真加工効果に広く利用されています。 フィルターはGPUで処理されるため、大きな画像や複雑なレイアウトでも高いパフォーマンスを発揮します。
FAQ
CSS filterプロパティとは何ですか？
CSS filterプロパティは、ぼかし・色調変更・明るさ調整などのグラフィック効果を要素に適用します。blur()・brightness()・contrast()・grayscale()・hue-rotate()・invert()・opacity()・saturate()・sepia()をスペース区切りで指定できます。フィルターは左から右の順に合成され、ほとんどのブラウザでハードウェアアクセラレーションが有効です。
デフォルト値のフィルター関数が出力から省かれるのはなぜですか？
brightness(100%)やblur(0px)のようなデフォルト値のフィルター関数は視覚的な効果を持たず、不要なコードを増やすだけです。このジェネレーターはデフォルト値と異なる関数のみを出力し、CSSを最小限に保ちます。すべてのスライダーがデフォルト値の場合は filter: none; を出力します。
ページ上の画像にフィルターを適用するにはどうすればよいですか？
生成したCSSをコピーし、対象要素のルールセットにfilterプロパティを追加します。例：img { filter: blur(4px) brightness(120%); }。画像以外のdivやsectionにも適用でき、効果は要素とすべての子孫を1つの合成レイヤーとしてレンダリングします。
CSSフィルターはアニメーション可能ですか？
はい。CSSフィルターはtransitionとkeyframeアニメーションに対応しています。要素に transition: filter 0.3s ease; を設定し、hover・focus・JavaScriptでfilter値を変更するだけです。開始と終了の状態で同じフィルター関数が含まれていれば、9つの関数すべてがスムーズに補間されます。
filter: opacity() とCSSのopacityプロパティの違いは何ですか？
単一要素への視覚的な効果は同じです。主な違いは、CSSのopacityプロパティが新しいスタッキングコンテキストを作成し、要素と子孫全体をグループとして処理する点です。filter: opacity()はフィルターチェーンの一部として他のフィルターと順番に合成されるため、1つのプロパティ値で複数の効果を組み合わせる際に便利です。