CSSフィルタージェネレーター
CSS filterプロパティを視覚的に調整しながら、コピペで即使えるCSSコードを生成できる無料ツールです。ホバー時のアニメーション（transition）コードも同時生成でき、デザイナー・コーダーの実務作業を大幅に効率化します。すべての処理はブラウザ内で完結します。
プリセット
ホバーアニメーション
ホバー時に適用するフィルターを設定してください
フィルター調整（通常時）
CSSフィルタージェネレーターとは？
CSSフィルタージェネレーターは、CSSの
filter プロパティを視覚的に操作しながら、コピペできるコードをリアルタイムで生成できる無料ツールです。ぼかし・明暗・コントラスト・彩度など9種類のfilter関数に対応し、スライダーを動かすだけで画像や要素への効果を即座に確認できます。さらに、他の競合ツールにはないホバーアニメーション（transition）コードの同時生成機能を搭載。「ホバーで白黒にしたい」「じわっとぼかしたい」というデザイナー・Webコーダーの実務ニーズに直接応えます。ローカル画像のドラッグ＆ドロップにも対応し、自分の制作物で効果を確認しながらCSSを詰められます。
各機能の説明
-
9種類のフィルタースライダーblur・brightness・contrast・grayscale・hue-rotate・invert・opacity・saturate・sepiaをスライダーで直感的に調整。複数のフィルターを重ねがけした状態でコードを一括生成できます。
-
ホバーアニメーション（:hover）コード生成「ホバー時コードを生成する」トグルを有効にすると、通常状態とホバー状態のフィルターを個別に設定でき、
transition: filter 0.3s ease;を含む実務直結のCSSコードを一発で出力します。 -
プリセットワンクリック適用モノクロ・ヴィンテージ・シネマティック・エモい（ムード）など、デザイナーがよく使うエフェクトをワンクリックで適用。プリセット後にスライダーで微調整もできます。
-
ローカル画像ドロップ読み込みPNG・JPGファイルをドラッグ＆ドロップするか、クリックしてファイル選択するだけで自分の画像にフィルターを適用してプレビューできます。画像データはサーバーに送信されません。
-
個別リセット＆全リセット各スライダー行に個別の「↩」リセットボタンを設置。複数掛け合わせたフィルターの一部だけを初期値に戻せます。「全リセット」ボタンですべての値を一括リセットすることも可能です。
-
ワンクリックコピー生成されたCSSコードをコードエリア右端の「コピー」ボタンでクリップボードに一発コピー。そのまま自分のスタイルシートに貼り付けて使えます。
9種類のフィルター関数について
-
blur（ぼかし）ガウスブラーをかけます。単位はpx。背景をぼかしたり、ホバー時にふわっとぼかすエフェクトで活用されます。
-
brightness（明るさ）100%が元の明るさ。0%で真っ黒、100%超で白飛び。ホバー時に明るくして「光る」演出に向いています。
-
contrast（コントラスト）100%が元のコントラスト。0%でグレー一色、200%で強烈なコントラストになります。
-
grayscale（グレースケール）0%でカラー、100%で完全なモノクロ。ホバーで白黒→カラーに切り替えるエフェクトはWebサイトの定番技法です。
-
hue-rotate（色相回転）色相環を0〜360度回転させます。画像の色味をがらりと変えたいときに使います。
-
invert（階調反転）0%で元の状態、100%でネガフィルムのような反転画像になります。ダークモード対応の応急処置としても使われます。
-
opacity（透過）0%で完全透明、100%で不透明。CSSの
opacityプロパティと同じ効果ですが、filter経由だとGPU合成の恩恵を受けやすいケースがあります。 -
saturate（彩度）0%でグレースケール、100%が元の彩度、100%超で鮮やかな発色になります。
-
sepia（セピア）0%でカラー、100%で完全なセピア調になります。レトロ・ヴィンテージ表現に活用されます。
こんなときに使う
-
ホバーで画像をモノクロ→カラーに切り替えたいgrayscaleを100%にした通常状態と、0%（カラー）のホバー状態を設定するだけで、transitionつきのCSSコードが即生成されます。
-
ポートフォリオサイトのサムネイルにエフェクトをかけたいプリセットのシネマティックやヴィンテージを適用してスライダーで微調整すれば、統一感のあるフィルター設定を素早く決められます。
-
InstagramライクなフォトエフェクトをCSSで実装したい複数のfilter関数を組み合わせて特定の「色味」を作り込み、その設定をコピペするだけで画像要素に適用できます。
-
ロゴや画像がグレー表示（非活性）になるデザインを実装したいgrayscale＋opacityの組み合わせで、非活性状態の見た目を調整しながらコードを確認できます。
-
クライアントへのデザイン提案用にさっと効果を確認したい自分の画像をドロップして各種プリセットや組み合わせを試せるため、Photoshopを開かずにCSSフィルターの見た目を即席で確認できます。
よくある質問
-
ホバー時のコードはどのように使えばいいですか？
「ホバー時コードを生成する」トグルをONにすると、通常状態（
.your-element）とホバー状態（.your-element:hover）の2ブロックがまとめて出力されます。transition: filter 0.3s ease;も含まれているため、コードをそのままCSSに貼り付けるだけでアニメーションが機能します。セレクタ名だけご自身のクラス名に書き替えてください。 -
ローカル画像はサーバーに送信されますか？
送信されません。ドロップされた画像はブラウザのFileReader APIによってローカルで読み込まれ、同じブラウザ内だけで処理されます。画像データが外部に送信されることはなく、ページを閉じると消去されます。
-
filter プロパティのブラウザ対応状況はどうですか？
モダンブラウザ（Chrome・Firefox・Safari・Edge）はすべて対応しています。IE11は未対応ですが、現在ほぼサポート終了の扱いのため実務上の問題はほとんどありません。Safari（iOS含む）でもベンダープレフィックスなしで動作します。
-
filter と backdrop-filter の違いは何ですか？
filterは要素そのものにフィルターを適用するプロパティです。一方、backdrop-filterは要素の背後（背景）に対してフィルターをかけるプロパティで、すりガラス（グラスモーフィズム）表現に使われます。このツールはfilterプロパティの生成に特化しています。 -
スライダーの初期値（デフォルト）はどのような状態ですか？
初期値はフィルターを適用しない「素の状態」です。具体的にはblur:0px、brightness:100%、contrast:100%、grayscale:0%、hue-rotate:0deg、invert:0%、opacity:100%、saturate:100%、sepia:0% となっています。各スライダー横の「↩」ボタンを押すと、その項目だけを初期値に戻せます。