カテゴリー: 開発ツール
CSSフィルタージェネレーター
スライダーでCSSのfilter宣言をライブ生成
ぼかし、明るさ、コントラスト、グレースケール、色相回転、色反転、不透明度、彩度、セピアをスライダーで調整し、組み合わせた効果をリアルタイムでプレビューしながら、生成されたCSSのfilter宣言をコピーできます。
出力
filter: none;
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
CSSのfilterプロパティを使うと、元画像を編集することなく、ぼかしや色調整といったグラフィカルな効果をブラウザ上で直接適用できます。複数の関数を1つの宣言にまとめて書くのは手間がかかりますが、このツールは各効果を調整するたびに文字列を自動生成し、実際に変更した関数だけを含めます。
使い方
- スライダーをドラッグして各フィルター関数を調整します。
- プレビューボックスがリアルタイムで更新されるのを確認します。
- 生成されたfilter宣言をスタイルシートにコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- 要素ではなく背景画像に適用できますか。
- はい。filterはbackground-imageを持つ要素を含め、どの要素にも適用できます。要素の内容ではなく背景だけをぼかしたい場合は、代わりにbackdrop-filterを使用してください。
- filterはパフォーマンスに影響しますか。
- 複雑なフィルターやアニメーションするフィルター、特にぼかしは、大きなサイズでは描画コストが高くなることがあります。アニメーションするフィルターを本番に投入する前に、実際の対象デバイスで確認してください。
- filter関数の順序はなぜ重要なのですか。
- 各関数は直前の関数の出力に対して適用されるため、grayscale(100%) sepia(50%)は順序を逆にすると異なる見た目になります。このツールは固定された、一般的な順序で関数を適用します。