CSS フィルター ジェネレーター

CSS フィルター ジェネレーターは、CSS フィルター プロパティのビジュアル エディターです。フィルター機能 (ぼかし、明るさ、コントラスト、飽和、グレースケール、セピア、反転、色相回転、不透明度) ごとにスライダーを移動し、エフェクトがプレビューに適用されるのをリアルタイムで確認し、生成された正確な CSS をコピーします。

Filter プロパティは、画像エディターを必要とせずに、ぼかし、色の変化、コントラスト調整などのグラフィカルな効果をブラウザーに直接適用します。 複数の関数を 1 つの宣言で連鎖して順番に適用できます。これは、ヴィンテージ、ウォーム、ドラマチックなどの写真スタイルの外観がどのように構築されるかです。 このツールは、そのチェーンを管理し、実際に変更した機能のみを出力して、CSS をクリーンに保ちます。

すべてのブラウザで発生します。 ヴィンテージやグレースケールなどのプリセットから始めて、各関数を微調整して、宣言をコピーします。 アカウントもアップロードもありません。ページが読み込まれた後もオフラインで動作します。

フィルターは書き込まれた順序で適用され、順序によって結果が変わります。 grayscale then sepia は sepia then grayscale と同じではありません。なぜなら、最初のものは 2 番目の色がかった色を削除するからです。 gotcha は視覚的というよりも構造的です。 none 以外のフィルターを持つ要素は、固定された絶対的に配置された子孫の包含ブロックになるため、フィルターをかけられた親内のドロップダウンまたはモーダルは、ビューポートではなくその親に対してそれ自体を配置します。また、新しいスタッキング コンテキストも作成されます。これにより、以前に機能した z インデックスの順序が崩れる可能性があります。フィルターが外観とは無関係に見える方法でレイアウトを壊す場合、ほとんどの場合、その理由がわかります。フィルターはほとんどのブラウザーで GPU 加速されますが、大きな要素上の大きなぼかし半径は高価のままです。