CSSフィルタージェネレーターとは？

CSSフィルタージェネレーターは、画像にかける filter の値をブラウザ上で調整し、そのまま使えるCSSコードを作るツールです。ぼかしや明るさの補正だけでなく、色相の回転やセピア、反転、不透明度の調整までまとめて試せるので、見た目を確認しながら値を決めたいときに役立ちます。

プレビューを見ながら調整すると、最終的に filter: ...; の形でコードが出力されます。画像の雰囲気を少し変えたいときから、複数のフィルターを組み合わせて印象を大きく変えたいときまで使いやすい構成です。

使い方

1. 左側のスライダーで各フィルターの値を調整します。
2. 必要に応じてスイッチで個別のフィルターをオン・オフします。
3. 右側のプレビューで見た目を確認します。
4. 生成されたCSSコードをコピーして使います。

途中でやり直したいときは、フィルターリセットで初期値に戻せます。スライダーは値を調整、スイッチはそのフィルターを一時的に無効化する目的で使い分けます。

プレビュー画像について

プレビュー画像は サンプル画像 タブと アップロード タブで切り替えられます。タブを切り替えてもプレビューの位置と filter の結果は変わりません。

• サンプル画像: 外部サービスのサンプル画像を表示します。プレビュー下の 別のサンプル で別のサンプル画像に切り替えられます。
• アップロード: 画像ファイルを 1 つアップロードしてプレビューに使えます。アップロードできるのは 1 枚で、処理はブラウザ内だけで完結します。別の画像を使うときは クリア で破棄してから新しいファイルをアップロードしてください。

調整できる主なフィルター

見た目をぼかしたり明るさを整えるフィルター

Blur

画像をぼかします。背景画像をやわらかく見せたいときや、前面のテキストを目立たせたいときに便利です。

Brightness

画像全体の明るさを調整します。暗い写真を少し見やすくしたいときや、背景を明るくして圧迫感を減らしたいときに使えます。

Contrast

明暗差を強めたり弱めたりします。輪郭をくっきり見せたいときや、全体の差を抑えてやわらかい印象にしたいときに向いています。

Opacity

画像の不透明度を調整します。背景画像を薄く表示したいときや、重ねる文字やUIを読みやすくしたいときに使いやすい項目です。

色味を変えるフィルター

Grayscale

画像をモノクロに近づけます。装飾を控えめにしたいときや、色数を抑えたデザインに寄せたいときに向いています。

Hue-Rotate

色相を回転させて色味を変えます。元画像の配色を大きく変えたいときや、ブランドカラーに寄せて試したいときに便利です。

Invert

色を反転します。ダークテーマ向けの見た目を試したいときや、特殊な表現を作りたいときに使えます。

Saturate

彩度を調整します。色を鮮やかにしたいときにも、逆に彩度を抑えて落ち着いた印象にしたいときにも使えます。

Sepia

画像をセピア調に変えます。レトロな雰囲気や温かみのある色味を簡単に試したいときに便利です。

活用シーン

• ヒーロー画像やバナー画像の雰囲気を調整したいとき
• 背景画像の主張を弱めて文字を読みやすくしたいとき
• サムネイルやカード画像に統一感を出したいとき
• デザイン案の比較用に、複数のフィルター設定をすばやく試したいとき

使うときのポイント

• フィルターを重ねるほど見た目の変化が大きくなるため、少しずつ調整すると意図した結果に近づけやすくなります
• Opacity や Blur を大きくしすぎると、画像の内容が分かりにくくなることがあります
• このツールで出力されるのは filter プロパティなので、適用先の要素や画像サイズ自体は別途CSSで調整します

まずは明るさとコントラストを軽く整えてから、必要に応じて彩度や色相を触るとバランスを見やすくなります。