CSS フィルター生成

機能

• 9 項目：ぼかし・明るさ・コントラスト・彩度・色相回転・グレースケール・セピア・反転・不透明度
• 前景の filter と背景の backdrop-filter を切り替え
• 背景モードではカラフルな下地を敷き、ぼかしと彩度が目に見えます
• 5 つのプリセット：すりガラス・モノクロ・セピア・高コントラスト・ネオン
• 中立的な項目は省略し、無意味な blur(0px) を出力しません
• backdrop-filter には -webkit- 接頭辞の行も同時に出力
• 出力する CSS に 2 つの落とし穴のコメントが付きます（表示言語に追従）
• 何を変えてもプレビューが即座に再描画。「生成」ボタンはありません
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まず用途を選びます：前景の filter か背景の backdrop-filter
2. プリセットから始めるか、カスタムにしてスライダーを自分で動かします
3. プレビューを見ながら好みの値に調整します
4. 下の CSS をコピーします。接頭辞の行とコメントも一緒に付いてきます

よくある質問

filter と backdrop-filter は何が違いますか？

`filter` は要素自身に作用します：ぼかすとその文字や枠まで滲みます。`backdrop-filter` は要素の背後に作用します：要素の下にあるものを処理し、要素自体は鮮明なままです —— すりガラス効果はこれと半透明の背景色の組み合わせです。カードの後ろの壁紙をぼかすなら backdrop-filter、ブロック全体を灰色や明るくするなら filter です。

backdrop-filter を設定しても効かないのはなぜですか？

最も多い原因は祖先要素の `filter` か `transform` です。どちらも祖先に包含ブロックや合成レイヤーを作るため、backdrop-filter が前提とする「背後」が期待した領域でなくなり、宣言ごと無効になります。祖先をたどって確認してください。次に多いのは `-webkit-` 接頭辞の欠落（Safari）と、背後が単色であることです —— 単色をぼかしても単色のままで、効いていないように見えます。本ツールの背景モードがカラフルな下地を敷くのは、効果を実際に見えるようにするためです。

ぼかしが 0 のとき blur() が出ないのはなぜですか？

`blur(0px)` は恒等変換で何もしないからです。コードを長くし、後から削除しづらくし、しかも一部のブラウザーではあらゆる `filter` 値が合成レイヤーを作り、領域を GPU に載せます。そこで本ツールは項目ごとに判定し、中立的な値は書き出しません。すべてのスライダーが中立なら、出力は空文字ではなく `filter: none` です —— 空文字は無効な宣言で、シェルの検証で丸ごと捨てられます。

1 つの要素で filter と backdrop-filter を併用できますか？

できます。独立した宣言なので両方書けます：`filter` は要素自身のピクセルを、`backdrop-filter` は背後を処理します。ただし順序と性能に注意してください。どちらも合成レイヤーを誘発することがあり、長いリストやアニメーションで重ねるとフレーム レートに影響します。本ツールは一度に一方だけ生成しますので、両方必要なときは 2 回生成してまとめてください。