CSSフィルタージェネレーター
画像をドロップして（任意）、スライダーをドラッグし、CSSのfilter値をコピーできます。
クリックまたは画像をドロップしてプレビュー（任意）
仕組み
各スライダーは、CSSのfilter関数（blur()、brightness()、
contrast()、saturate()、grayscale()、sepia()、
hue-rotate()、invert()）のいずれか1つに直接対応しています。ニュートラルな
値のままの関数はコピーされるCSSを最小限に保つために出力から省かれ、残りはスペースで連結されます。
CSSは連結されたフィルター関数を書かれた順に適用するためです。この文字列はそのままプレビュー画像自身の
filterスタイルとして設定されるため、見えているものはシミュレーションではなく実際の効果です。
画像はローカルのオブジェクトURLとして読み込まれ、ブラウザのタブから出ることはありません。 アップロードのステップはありません。
よくある質問
自分の画像でプレビューできますか?
はい。好きな画像をドロップすれば、すべてのスライダーがライブプレビューを即座に更新します。画像をアップロードしていない場合は、代わりにプレースホルダーのグラデーションでスライダーの効果をプレビューします。
フィルターはレイアウトに影響しますか?
いいえ。CSSフィルターは純粋に見た目だけの効果で、実際の画像ファイルを差し替える場合とは異なり、要素のボックスサイズや位置を変えることはありません。何も再レイアウトされないため、ホバー時やクラスによる切り替えのコストが低く抑えられます。
画像はどこかにアップロードされますか?
いいえ。プレビューはローカルのオブジェクトURLに対してブラウザ自身のCSSエンジンを使って行われます。アップロードは一切行われません。