CSS フィルタージェネレーター
CSS の filter() および backdrop-filter() 関数のチェーンを並べ替えながら構築し、アップロードした写真にライブプレビューできます。CSSのコード行をコピーしたり、PNGで書き出したりすることも可能です。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
多くのCSSフィルタージェネレーターでは blur()、brightness()、contrast() などを重ねられますが、ほとんどは適用順序が固定されており、順序による違いを確認できません。本ツールは異なります。フィルターチェーンはネイティブのHTML5ドラッグ＆ドロップで並べ替え可能な実リストとして構築され、2つの関数の順序を入れ替えると、実際のプロダクションCSSと同様に描画ピクセルが変化します。「blur → hue-rotate」と「hue-rotate → blur」では見た目が異なることを、公開前に確認できます。
お手持ちの写真をアップロードすると、9種類の連結可能な関数（blur、brightness、contrast、saturate、hue-rotate、sepia、grayscale、invert、drop-shadow）が実際の filter CSS 宣言として <img> 要素にライブ適用されます。セレクトから関数を追加し、行をドラッグしてチェーン内の位置を変え、スライダーを調整すると、プレビューとコピー可能な filter: ...; 行が入力のたびに更新されます。行内の専用ボタンでステップを削除することもできます。
2つ目の小さなチェーンでは、backdrop-filter の値を構築し、プレビュー上に配置されたオーバーレイパネルに適用します。これにより、モダンな半透明ナビゲーションバーやモーダル背景の手法であるすりガラス効果を、元画像のフィルターチェーンに影響を与えずに確認できます。写真をアップロードする前でも、カラフルなプレースホルダー背景に対して動作するため、すりガラスパネルのデザインを数秒で仕上げられます。
プレビューが希望通りになったら、出力ボックスからCSSを直接コピーするか、本物のPNGとして書き出せます。同じフィルター文字列が Canvas 2D コンテキストの ctx.filter プロパティ（CSS filter プロパティと同一の構文）に渡され、canvas.toBlob() でダウンロード可能なファイルに変換されます。エクスポートされた画像は、同じレンダリングプリミティブを通じて同じフィルター文字列で生成されるため、ライブプレビューと完全に一致します。すべての処理はお使いのブラウザ内でローカルに完結し、写真がサーバーにアップロードされることは一切ありません。