CSSフィルタージェネレーターとは？
「CSSフィルタージェネレーター」は、CSSのfilterプロパティを使った画像加工をリアルタイムで試せるツールです。
ぼかし、明るさ、コントラスト、色相回転、影付けなど、さまざまなエフェクトを直感的に調整できます。
作成したフィルターのCSSコードをそのままコピーして、Webサイトやブログに適用できます。
CSS Filter Generator
0px
100%
100%
0%
0%
100%
0°
0%
0px
CSSコード
主な機能
- ぼかし (blur) → 画像をソフトにぼかす
- 明るさ (brightness) → 画像の明るさを調整
- コントラスト (contrast) → 色のコントラストを強調
- グレースケール (grayscale) → モノクロ変換
- セピア (sepia) → レトロなセピア調に変換
- 彩度 (saturate) → 色の鮮やかさを調整
- 色相回転 (hue-rotate) → 色味を変更
- 反転 (invert) → 色を反転させる
- 影付け (box-shadow) → 画像に影を追加
使い方
1. プレビューで確認
画像に対して、各フィルターの値をスライダーで調整するとリアルタイムで反映されます。
2. 数値の確認
スライダーの横に現在の数値が表示されるので、調整しながら適切な値を選べます。
3. CSSコードをコピー
調整が完了したら、「CSSコードをコピー」ボタンをクリック。
生成されたCSSをコピーして、そのままサイトのスタイルシートに適用できます。
4. Webサイトに適用
コピーしたコードを、CSSのfilterプロパティとして指定すれば完了。
