CSSフィルタージェネレーター
CSSフィルタープロパティを視覚的に生成およびプレビューするためのツール。
フィルター設定
各フィルタープロパティを調整します
プリセット
定義済みのフィルタースタイルを試してください
プレビュー
デフォルト画像に生成されたフィルター効果を確認してください
オリジナル
フィルター適用後
Filter Preview
生成されたCSS
filter: none;CSSフィルター機能の説明
視覚効果
- • blur(px): ぼかし効果
- • brightness(%): 明るさ調整
- • contrast(%): コントラスト調整
- • opacity(%): 不透明度調整
色効果
- • grayscale(%): グレースケール効果
- • hue-rotate(deg): 色相回転
- • invert(%): 色反転
- • saturate(%): 彩度調整
- • sepia(%): セピア効果
使用のヒント
- • 複数のフィルターをスペースで区切って組み合わせる
- • 画像だけでなく、任意のHTML要素に適用する
- • CSSアニメーションと組み合わせて動的な効果を作成する
- • 背景にのみ適用するにはbackdrop-filterを使用する