CSS Filter Generator

使い方

1. 8 本のスライダーを動かします。プレビューは操作に合わせて更新されるため、コピーする前に見た目を判断できます。
2. 方向性が欲しい場合はプリセットから始めます。レトロはセピアを足して彩度を下げ、モノクロは完全なグレー、クールトーンは色相を回転させます。
3. プリセット適用後も各スライダーは調整できます。プリセットは初期値を与えるだけです。
4. 生成された filter 宣言をコピーします。中立値と異なる関数のみを書き出すため、文字列は短く保たれます。
5. 同じ文字列を自分の画像に適用します。プレビューはグラデーション画像ですが、フィルターの計算は同一です。

よくある用途

• ホバーや状態表現 —— 明るさでサムネイルを暗くし、ホバーで元に戻します。
• アートワークをテーマに合わせる —— 色相回転と彩度調整で、明るい画像をブランドの配色に寄せます。
• プレースホルダーと読み込み状態 —— ぼかしとグレースケールで「まだ読み込まれていない」ことを示せます。
• ダークモードでの画像処理 —— 明るさとコントラストを少し下げれば、暗い下地で写真が眩しくなりません。
• 各関数の働きを説明する —— 同じプレビューで 1 本だけ動かせば、その関数単体の効果が分かります。

よくある質問

Q: 一部の関数が出力されないのはなぜですか？ A: brightness(100%) のような中立値の関数は見た目を変えません。宣言を読みやすくするため、これらは省略しています。

Q: 動画やセクション全体にも適用できますか？ A: はい。filter は video、canvas、コンテナを含むあらゆる要素に効きます。ただし広い範囲のぼかしは描画コストが上がります。

Q: 関数の順序は関係ありますか？ A: あります。フィルターは左から順に適用されるため、グレースケールを先にするかセピアを先にするかで結果が変わります。生成される文字列は固定順なので、必要なら意図的に並べ替えてください。