CSS filterとは？
filterは、要素を画面へ描画する前に、ぼかし・明るさ・コントラスト・色変換・影などの効果を加えるCSSプロパティです。このツールはW3C Filter Effects Module Level 1の標準関数10種類を対象にしています。
filter関数は記述順に適用されます
複数の関数は左から右へ順番に適用され、2つ目以降は直前の関数による処理結果を受け取ります。そのため、同じ関数と値でも順序によって見た目が変わる場合があります。画面の↑・↓と生成コード、プレビュー、コピー内容は常に同じ順番です。
filter: blur(4px) brightness(120%);対応する10種類のfilter関数
blur()：px・rem・emでぼかしを指定します。%や負値は使えません。brightness()：0%は黒、100%は変化なし、100%超はより明るくします。contrast()：0%は灰色、100%は変化なし、100%超は差を強めます。drop-shadow()：要素の輪郭へ、X・Y・ぼかし・色・不透明度で影を付けます。grayscale()：0～100%でモノクロ化します。hue-rotate()：degで色相を回転します。負値や360degを超える値もそのまま出力します。invert()：0～100%で色を反転します。opacity()：0～100%で描画の透明度を変えます。saturate()：100%を基準に彩度を調整し、100%超にも対応します。sepia()：0～100%でセピア調へ変換します。
drop-shadowとbox-shadowの違い
drop-shadow()は入力画像の透明部分を考慮した輪郭へ影を付けます。Filter Effects Level 1ではspread、inset、1関数内の複数shadowを受け付けません。複数の影が必要な場合はdrop-shadow関数自体を複製してください。ボックス全体へ影を付けたい場合は、関連ツールのbox-shadowをご利用ください。
値の入力と安全上限
全角数字と全角小数点は半角へ正規化します。空欄、NaN、Infinity、指数表記、複数の小数点、許可されていない負値はCSSへ反映せず、直前の正常なプレビューを維持します。操作ミスを防ぐため数値入力には十分大きな安全上限を設けていますが、CSS仕様そのものの上限を示すものではありません。
対応範囲
このツールはCSSのfilterプロパティと標準関数だけを生成します。SVGフィルターのurl()参照、backdrop-filter、カスタムSVG、WebGL、画像ファイルの加工や保存には対応していません。
よくある質問
CSS filterとは何ですか？
要素の描画へ、ぼかし・明るさ・色変換・影などの視覚効果を適用するCSSプロパティです。
filter関数の順番で見た目は変わりますか？
変わる場合があります。記述した左から右へ順番に適用され、後の関数は前の処理結果を受け取ります。
複数のfilterを組み合わせられますか？
空白で区切って複数の関数を指定できます。このツールでは最大12個まで追加・複製・並べ替えできます。
同じfilterを複数使えますか？
使えます。複製ボタンまたは追加欄から同じ種類を加えてください。
filterを解除するには？
filter: none;を指定します。「なし」プリセットまたは初期設定に戻すボタンで作成できます。
hue-rotateは360degを超えてもよいですか？
有効です。仕様上は値を正規化しないため、このツールも450degなどをそのまま出力します。
マイナス値を使えますか？
hue-rotateとdrop-shadowのX・Y方向には使えます。blurや割合系の関数、影のぼかしには使えません。
blurに%を使えますか？
使えません。このツールではpx・rem・emのlengthだけに対応します。
drop-shadowにspreadやinsetは使えますか？
Filter Effects Level 1のdrop-shadow関数では受け付けないため、このツールでは扱いません。
drop-shadowとbox-shadowは同じですか？
異なります。drop-shadowは入力画像の透明部分を考慮した輪郭へ影を付け、box-shadowは要素のボックスを基準にします。
入力した設定は外部へ送信されますか？
送信されません。設定とプレビューはブラウザ内だけで処理し、Cookieやブラウザストレージへ保存しません。