CSSフィルタージェネレーターとは
CSSフィルタージェネレーターはCSS filterプロパティのためのビジュアルプレイグラウンドです。filter: blur(3px) grayscale(50%)と手動で入力する代わりに、スライダーを調整して結果を即座に確認できます。
クイックアンサー
CSSフィルター（blur、brightness、contrast、grayscale、hue-rotate、invert、saturate、sepia、opacity）をプレビュー要素または画像に適用。各フィルターをスライダーで調整し、CSS filterプロパティをコピー。
Last updated: 2026-06-11
制限事項
- drop-shadowフィルター関数は含まれていません。
- プレビューは要素全体に適用されるCSS filterプロパティを使用。
- 画像プレビューには公開HTTPS URLが必要。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- フィルタースライダーを調整：Blur、Brightness、Contrast、Grayscale、Hue-rotate、Invert、Saturate、Sepia、Opacity。
- カラフルなグラデーション見本でリアルタイムに更新されるライブプレビューを観察。
- オプションで公開画像URLを貼り付けて実際の写真でフィルターをプレビュー。
- 出力パネルからCSS filterプロパティをコピー。
主な用途
- 画像ギャラリーのホバー効果に適用する前にCSSフィルターの組み合わせをプレビュー。
- グレースケールからカラーへのカードアニメーションの最適設定を製品写真でテスト。
- ヴィンテージ写真ギャラリー用のセピアトーンフィルターCSSをすばやく生成。