このツールについて
ぼかし、明るさ、コントラスト、グレースケール、色相回転、階調反転、不透明度、彩度、セピアを 1 組のスライダーにまとめ、プレビューは CSS が定める順序で適用します。実際に動かした関数だけを出力するため、コピーされる filter 宣言は常に最短で、効果のない 100% の指定が並ぶことはありません。
CSS / FRONTEND · ブラウザ内で処理
CSS Filter 生成
ぼかし・明るさ・コントラスト・彩度などを調整し、効果を即座に比較。
初期値と異なる関数のみを出力するため、コピーする CSS に余分な指定は含まれません。
Tooloo
Tooloo
filter: none;
プリセット
プリセット
フィルター調整
操作手順
- プリセットを適用するか、個別のスライダーを直接動かします。
- プレビューで適用前後の違いを比較します。
- filter 宣言をコピーするか、初期状態に戻します。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- filter は子要素にも影響しますか。
- 影響します。filter は要素とその内部すべてに適用され、新しいスタッキングコンテキストと包含ブロックを生成するため、position: fixed の子孫要素の位置が変わることがあります。背景だけを処理したい場合は backdrop-filter を使ってください。
- フィルターの順序は結果に影響しますか。
- 影響します。フィルターは順番に適用されるため、グレースケールの後にコントラストを上げる場合と、その逆とでは結果が異なります。本ツールは常に一定の順序で出力するため、プレビューとコピーした CSS は必ず一致します。