フロントエンド開発をサポートするオンラインジェネレーター

画像加工が簡単!CSSフィルタージェネレーターでエフェクトを自在に調整

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

「CSSフィルタージェネレーター」は、CSSのfilterプロパティを使った画像加工をリアルタイムで試せるツールです。
ぼかし、明るさ、コントラスト、色相回転、影付けなど、さまざまなエフェクトを直感的に調整できます。
作成したフィルターのCSSコードをそのままコピーして、Webサイトやブログに適用できます。

CSS Filter Generator

0px
100%
100%
0%
0%
100%
0%
0px

CSSコード

主な機能

  • ぼかし (blur) → 画像をソフトにぼかす
  • 明るさ (brightness) → 画像の明るさを調整
  • コントラスト (contrast) → 色のコントラストを強調
  • グレースケール (grayscale) → モノクロ変換
  • セピア (sepia) → レトロなセピア調に変換
  • 彩度 (saturate) → 色の鮮やかさを調整
  • 色相回転 (hue-rotate) → 色味を変更
  • 反転 (invert) → 色を反転させる
  • 影付け (box-shadow) → 画像に影を追加

使い方

1. プレビューで確認

画像に対して、各フィルターの値をスライダーで調整するとリアルタイムで反映されます。

2. 数値の確認

スライダーの横に現在の数値が表示されるので、調整しながら適切な値を選べます。

3. CSSコードをコピー

調整が完了したら、「CSSコードをコピー」ボタンをクリック。
生成されたCSSをコピーして、そのままサイトのスタイルシートに適用できます。

4. Webサイトに適用

コピーしたコードを、CSSのfilterプロパティとして指定すれば完了。

よかったらシェアしてね!
  • URLをコピーしました!