CSS filter生成ツール
blur・brightness・contrast・grayscale・hue-rotate・invert・opacity・saturate・sepia・drop-shadowをスライダーで調整し、ライブプレビューを見ながらCSS filterコードを生成・コピーできます。
プレビュー
フィルター
0px
100%
100%
0%
0deg
0%
100%
100%
0%
px
px
px
生成されたCSS
プリセット
使い方
1
画像を選ぶ
サンプル画像をそのまま使うか、「画像を選択」からお手持ちの画像を読み込みます。画像はブラウザ内でのみ処理されます。
2
スライダーで調整
blurやbrightnessなど各フィルターのスライダーを動かすと、プレビューにリアルタイムで反映されます。プリセットからの選択も可能です。
3
CSSをコピー
生成されたfilterプロパティのCSSコードをコピーボタンでクリップボードにコピーし、そのままスタイルシートに貼り付けて使用します。
CSS filter生成ツールとは
CSSのfilterプロパティを視覚的に生成するWebツールです。blur（ぼかし）、brightness（明るさ）、contrast（コントラスト）、grayscale（グレースケール）、hue-rotate（色相回転）、invert（色反転）、opacity（不透明度）、saturate（彩度）、sepia（セピア）、drop-shadow（ドロップシャドウ）の各効果をスライダーで調整し、ライブプレビューを確認しながらそのまま使えるCSSコードを出力します。すべての処理はブラウザ内で完結し、画像やデータがサーバーに送信されることはありません。
機能・特徴
- 10種類のフィルターblur・brightness・contrast・grayscale・hue-rotate・invert・opacity・saturate・sepia・drop-shadowに対応。複数を組み合わせて適用できます。
- ライブプレビュースライダーを動かすと即座にプレビューへ反映。サンプル画像のほか、自分の画像を読み込んで確認できます。
- プライバシー保護画像の読み込み・処理はすべてブラウザ内で完結。アップロードされた画像がサーバーに送信されることはありません。
- すぐ使えるCSS出力生成されたfilterプロパティをワンクリックでコピー。filter値のみのコピーにも対応しています。
活用シーン
- 画像のレタッチ風エフェクトをCSSだけで実現
- ヒーロー画像や背景画像の雰囲気調整
- ホバー時のブラー・明度変化エフェクト作成
- ロゴやアイコンのドロップシャドウ付与
- ダークモード向けの色反転スタイル検証
よくある質問
CSS filter生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
アップロードした画像はサーバーに保存されますか？
いいえ。画像の読み込みとフィルター処理はすべてお使いのブラウザ内で完結し、画像がサーバーに送信・保存されることはありません。
生成したCSSはそのまま使えますか？
はい。出力された filter プロパティをコピーして、対象要素のCSSにそのまま貼り付けるだけで適用できます。filter値のみのコピーにも対応しています。
drop-shadowとbox-shadowの違いは何ですか？
box-shadowは要素の矩形（境界ボックス）に影を付けますが、filterのdrop-shadowはPNGの透過部分などを含めた実際の形状に沿って影を落とします。透過画像やアイコンにはdrop-shadowが適しています。
CSS filterはどのブラウザで使えますか？
Chrome、Firefox、Safari、Edgeなど2026年現在の主要ブラウザはすべてfilterプロパティに対応しています。古い環境向けには -webkit- プレフィックス付きの記述も出力できます。
複数のフィルターを同時に適用できますか？
はい。filterプロパティは複数の関数をスペース区切りで並べることで重ねて適用できます。本ツールでも調整したすべての効果を1行のCSSにまとめて出力します。