CSS フィルター生成ツール
スライダーでblur・明るさ・コントラスト・彩度などを調整し、CSS filterコードを即生成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
blur、brightness、contrast、grayscale、hue-rotate、saturate、sepiaをスライダーで調整し、結果をリアルタイムプレビューで確認するツールです。Web制作者やデザイナーが画像やボックスに適用するfilter値を目で合わせ、コピーしてすぐ使いたいときに便利です。
使い方
- スライダーを動かして、好みのフィルター効果を調整します。
- 上部のプレビューボックスで適用結果をリアルタイムに確認します。
- 完成したfilterのCSSをコピーして、目的の要素に貼り付けます。
- 気に入らなければ、初期化ボタンでデフォルト値に戻します。
よくある質問
- デフォルト値のままのスライダーもCSSに含まれますか？
- いいえ。明るさ・コントラスト・彩度などがデフォルト（100％）だったり、blurが0のフィルターは結果コードから自動的に外れ、本当に必要な値だけがすっきり生成されます。
- 入力した値はサーバーに送信されますか？
- 送信されません。すべての計算とプレビューはお使いのブラウザ内だけで処理され、どのデータもサーバーには送りません。
- 複数のフィルターを同時に重ねて使えますか？
- はい。複数のスライダーを一緒に調整すると、blur(2px) brightness(110%)のように空白でつながった1つのfilter値としてまとめて生成されます。