CSS Filter & Blend ジェネレーター
フィルターやブレンドを視覚的に組み合わせ、コード生成と画像保存が可能です。
プリセット
※ 追加したフィルターは [≡] ハンドルをドラッグして順番を入れ替えることができます。
プレビュー
生成されたCSS
Tailwind CSS
CSS Filter & Blend ジェネレーターの概要
CSS Filter & Blend ジェネレーターは、CSSの filter、backdrop-filter、mix-blend-mode という強力な画像処理プロパティを一つの画面で組み合わせ、視覚的にコードを生成できる無料のデベロッパーツールです。写真加工アプリのような多彩なエフェクトをブラウザ上でシミュレートし、Webサイトに即座に組み込むことができます。
Photoshopや各種写真アプリで使われているような、画像の明るさ・コントラストの調整、ぼかし、セピア化、さらには背面との乗算・スクリーン合成などを全てCSSだけで再現可能です。プレビューしながらドラッグ操作で重なり順（適用順序）を自由に変更でき、新機能としてTailwind CSSクラスの生成にも対応。加工後の状態は画像（PNG）としてダウンロードすることも可能です。
ツールの使い方
プレビュー用画像の設定
「画像変更」ボタンからご自身のパソコンやスマホに入っている画像を読み込んでプレビューできます。画像はサーバーにはアップロードされず安全です。キャンバスの縦横比や背景パターンも調整できます。
フィルター追加と並び替え
Blur（ぼかし）やContrast（コントラスト）などを選び「追加」をクリックします。追加されたフィルターはスライダーで強度を調整でき、左端のハンドルをドラッグして上下に順序を入れ替えることができます。
コードコピーと画像保存
設定した効果は即座にCSSおよびTailwind CSSコードとして出力されます。ご自身のサイトに貼り付けてください。「画像を保存」ボタンを押せば、Canvas描画技術によりプレビューの見た目をそのままの高画質画像として保存可能です。
CSSフィルター関連用語集
- filter
- 要素（主に画像）自体に視覚効果を適用するCSSプロパティです。ぼかし（blur）、明るさ（brightness）、色の変化などの関数をスペース区切りで複数指定でき、指定した順番に左から右へと処理されます。
- backdrop-filter
- 要素の「背後」にある領域にフィルター効果を適用します。要素自体は半透明である必要があり、背後の画像をぼかすモダンな「すりガラス（Glassmorphism）」効果の実現に不可欠なプロパティです。
- mix-blend-mode
- 要素をその背後にあるコンテンツとどのように混ぜ合わせるか（ブレンドするか）を指定します。Photoshopのレイヤー合成モードと同じように、乗算（multiply）やスクリーン（screen）、オーバーレイ（overlay）などを選べ、複雑な色彩表現を可能にします。
- Tailwind CSS
- ユーティリティファーストのCSSフレームワークで、本ツールでは生成した複雑なフィルターの組み合わせを
backdrop-blur-mdやmix-blend-multiplyといった簡潔なクラス名の羅列として出力する機能を備えています。
よくある質問
- Q.アップロードした画像はサーバーに保存されますか？
- いいえ、アップロード機能はお客様のブラウザ内（ローカル環境）でのみ表示確認を行うために使用されており、画像データが外部サーバーへ送信されることは一切ありません。完全に安全かつオフラインに近い状態で動作します。
- Q.filter と backdrop-filter の違いは何ですか？
- filter は指定した要素（例えば画像タグそのもの）を直接加工します。一方、backdrop-filter はその要素の「背後」にあるコンテンツに対して加工を行います。背後をぼかして手前にテキストを置くようなUIでは backdrop-filter を使用します。
- Q.適用順序を入れ替えても変化が出ないのですが？
- 例えば「Contrast（コントラスト）」と「Brightness（明るさ）」等の特定の組み合わせは、順序による視覚的変化が非常に小さい場合があります。一方で「Blur（ぼかし）」の後に「Contrast」をかけるとエッジが際立つなど、組み合わせによって違いがはっきりと現れます。
- Q.生成された画像の保存が失敗します
- 外部サイトのURLを直接指定して読み込んだ画像など、CORS（Cross-Origin Resource Sharing）ポリシーによってブラウザがCanvasへのエクスポートをブロックしている可能性があります。「画像変更」からご自身のデバイスにあるファイルを直接アップロードしてから再度お試しください。
活用シーン
すりガラスUI（Glassmorphism）の構築
モーダルウィンドウや固定ヘッダーの背景色を半透明にし、backdrop-filterでぼかすことで、iOSやmacOS風のモダンな深度表現やカードUIを簡単に実装できます。
ヒーローヘッダーの背景画像調整
サイトトップの画像の上に文字を乗せる際、背景画像の明るさを落とし（brightness）、わずかにぼかす（blur）ことで、テキストの視認性と美しさを両立させることができます。
ホバー時の動的インタラクション
普段はモノクロ（grayscale）で表示しておき、マウスオーバー時（:hover）にカラーに戻し影を付けるような、ユーザーの目を引く動的エフェクトのCSSを素早く生成できます。
ダークモードへの画像追従対応
ユーザーのOS設定がダークモードになった際、画像を少し暗めにしたりセピア調にして眩しさを抑えるなど、メディアクエリと組み合わせた細やかな調整に活用できます。
CSSフィルターの技術解説
CSSフィルターの「順番」の重要性
CSSフィルターにおける最大の技術的ポイントは「適用順番」です。例えば、filter: saturate(200%) blur(5px); と filter: blur(5px) saturate(200%); では、ブラウザのレンダリング結果が微妙に異なります。前者は色を強調してからぼかしますが、後者はぼかした色に対して強調をかけるためです。
当ツールでは、リストをドラッグ＆ドロップで並び替えることで、この適用順序による変化をリアルタイムにご確認いただけます。
ハードウェアアクセラレーションとCanvas保存技術
これらのフィルター効果はデバイスのGPU（ハードウェアアクセラレーション）を用いて高速に描画されるため、元の画像を加工して保存し直すよりも動的で優れたパフォーマンスを発揮します。
さらに「画像を保存」機能においては、Canvas 2D APIの globalCompositeOperation を駆使し、ブラウザのCSSレンダリングをピクセルレベルでシミュレートして一枚の高画質PNGとして生成・出力する独自のアルゴリズムを実装しています。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。