CSS フィルター ジェネレータ WEB制作
CSS の filter プロパティ を使い、画像や要素にぼかし・明るさ・コントラスト・グレースケール・色相回転・反転・彩度・セピア・ドロップシャドウなどのエフェクトを視覚的に適用するジェネレータです。複数効果を組み合わせて、リアルタイムプレビューしながらCSSコードを生成できます。
Blur (ぼかし)
0px
Brightness (明るさ)
100%
Contrast (コントラスト)
100%
Grayscale (グレースケール)
0%
Hue-rotate (色相回転)
0°
Invert (色反転)
0%
Saturate (彩度)
100%
Sepia (セピア)
0%
Opacity (透明度)
100%
プリセット
CSS
使い方
- 9種類のフィルターをスライダーで自由に組み合わせ
- 「リセット」で全フィルターを初期値に
- プリセットから一発で人気のスタイル (ヴィンテージ・モノクロ・夜景等) を適用
- サンプル画像はランダムに変わる Lorem Picsum・実際の写真で効果を確認可能
- CSS コードを即コピー
各フィルターの説明
- blur: ぼかし (px単位)・背景ぼかしによく使用
- brightness: 明るさ (100% = 元・150% = 明るい・50% = 暗い)
- contrast: コントラスト・くっきり感
- grayscale: 白黒化 (100%で完全モノクロ)
- hue-rotate: 色相を回転 (180°で補色)
- invert: 色を反転 (100%でネガフィルム風)
- saturate: 彩度 (100%が標準・0%で無彩色)
- sepia: セピア (古い写真風)
- opacity: 透明度
活用シーン
- 背景ぼかし: モーダル背景に blur(10px)
- ホバー時のモノクロ: 通常時 grayscale(100%) → ホバーで 0%
- ヴィンテージ写真: sepia(60%) + saturate(140%) + brightness(95%)
- 夜景化: brightness(60%) + contrast(120%) + hue-rotate(220deg)