🎛️ CSS filterジェネレーター
CSSの filter プロパティを、スライダーを動かしながらライブプレビューで調整できます。ぼかし・明るさ・コントラスト・グレースケール・セピア・彩度・色相回転・階調反転・不透明度の9種に加え、drop-shadow にも対応。既定値から変更したぶんだけを含む filter: … をリアルタイムに生成してコピーできます。
filter の調整
ライブプレビュー
生成されたCSS
filter: none;
既定値（brightness/contrast/saturate=100%、opacity=100%、他=0）から変更したぶんだけを出力します。変更が無いときは none になります。
解説
CSSの filter プロパティは、要素（画像・背景・テキストを含むボックス全体）に対して、ぼかしや色調補正などの視覚効果をまとめて適用するための機能です。値は blur() や brightness() のような「フィルター関数」をスペース区切りで並べて書きます。本ツールは各関数をスライダーで直感的に調整し、結果をCSSだけで描いたサンプル図形にリアルタイムで反映します。生成される文字列はそのままスタイルシートへ貼り付けて使えます。
各関数の意味は次のとおりです。blur(px) は半径ぼかし、brightness(%) は明るさ（100%が原寸、0%で真っ黒）、contrast(%) はコントラスト（100%が原寸）、grayscale(%) は灰色化の度合い、sepia(%) は褐色化、saturate(%) は彩度、hue-rotate(deg) は色相環の回転角、invert(%) は階調反転、opacity(%) は不透明度です。brightness・contrast・saturate・opacity は 100% が「変化なし」の基準で、他は 0 が「変化なし」です。
このツールは、基準値から動かしたスライダーのぶんだけを出力に含めます。たとえば明るさだけを120%にした場合の出力は filter: brightness(120%); となり、初期値のままの関数は書き出しません。こうすると余分な指定が消え、意図が読み取りやすく、再描画の負荷も小さいCSSになります。複数の関数を指定したときは、書かれた順に左から適用されるため、並び順によって仕上がりが変わる点に注意してください（例: ぼかしてから明るくするのと、明るくしてからぼかすのでは結果が異なります）。
影を付ける drop-shadow() は、要素の不透明な形（画像の透明部分を除いた輪郭や文字の形）に沿って影を落とします。四角い箱の外周に影を付ける box-shadow とは異なり、切り抜きPNGやアイコンの「形そのもの」に影が付くのが特長です。すべての処理は端末内（ブラウザ内）で完結し、入力内容や画像がどこかへ送信されることはありません。生成されたCSSをコピーして、自分のサイトのスタイルに貼り付けてご利用ください。
よくある質問
brightness と contrast と saturate の違いは？
brightness は全体の明るさ（各画素を一律に明るく／暗く）、contrast は明暗の差の強さ（中間調を基準に明るい所はより明るく、暗い所はより暗く）、saturate は色の鮮やかさ（彩度）を調整します。いずれも 100% が「変化なし」で、0% にすると brightness は真っ黒、saturate は完全なグレー、contrast は一様なグレーになります。
複数の filter 関数を並べる順番は結果に影響しますか？
影響します。filter は左から順に適用されるため、blur(4px) brightness(150%) は「ぼかしてから明るく」、brightness(150%) blur(4px) は「明るくしてからぼかす」となり仕上がりが変わります。本ツールは blur→brightness→contrast→grayscale→sepia→saturate→hue-rotate→invert→opacity→drop-shadow の順で出力します。順番を変えたい場合はコピー後に手で並べ替えてください。
drop-shadow と box-shadow はどう違いますか？
box-shadow は要素の四角い箱（境界ボックス）の外周に影を付けます。一方 filter の drop-shadow は要素の不透明な形に沿って影を落とすため、透過PNGのアイコンや文字の輪郭など「形そのもの」に影が付きます。切り抜き画像に自然な影を付けたいときは drop-shadow、カードやボタンの箱に影を付けたいときは box-shadow が向いています。
hue-rotate の deg（角度）は何を表しますか？
色相環（赤→黄→緑→青→紫→赤と一周する色の輪）を、指定した角度ぶん回転させます。0deg と 360deg は変化なし、120deg でおおよそ赤が緑寄りに、180deg で補色に近い方向へ回ります。明度や彩度は保ったまま色みだけをずらせるので、同じ画像から色違いのバリエーションを作るのに便利です。
filter は表示が重くなりますか？（GPU負荷）
多くの filter は GPU で処理され軽快ですが、blur は半径が大きいほど計算量が増え、スクロールやアニメーションと組み合わせると描画が重くなりがちです。特に多数の要素や大きな領域に強いぼかしを掛ける、影を何重にも重ねる、といった使い方は負荷が上がります。必要最小限の関数・値にとどめ、変化しない部分には filter を掛けないのが軽さのコツです。
どんな場面で使うと便利ですか？
画像のトーンをサイトの雰囲気に合わせて統一する（グレースケールやセピアで揃える）、ホバー時に明るさや彩度を上げて反応を示す、背景画像を軽くぼかして上に載せる文字を読みやすくする、アイコンに drop-shadow で立体感を出す、といった用途に向きます。要素を書き換えずに見た目だけを調整できるため、元の素材を保ったまま試行錯誤できます。
backdrop-filter とは違うのですか？
別物です。filter は「その要素自身」に効果を掛けますが、backdrop-filter は「要素の背後にある内容」に効果を掛けます。半透明パネルの後ろをぼかす“すりガラス”表現には backdrop-filter を使います。本ツールが生成するのは filter で、値の書き方（blur() など）は共通なので、必要なら生成結果の filter: を backdrop-filter: に置き換えて流用できます。
入力や画像はサーバーに送られますか？
送られません。スライダーの操作もCSSの生成もすべてブラウザ内で完結し、どこにも送信されません。プレビューはCSSだけで描いたサンプル図形で、外部画像も読み込みません。オフラインでも利用できます。