CSSのfilterプロパティをリアルタイムでプレビュー
このツールは、画像の明るさ、コントラスト、彩度、セピア、ぼかしなどの調整をブラウザのレンダリングエンジンを利用してリアルタイムに適用します。スライダーを動かすと、即座に結果が反映されます。
プレビューと同時に、同じ見た目をWebサイト上で再現するためのCSSコード（filterプロパティ）が自動的に生成されます。生成されたコードをコピーしてご自身のスタイルシートに貼り付けるだけで、どんなHTML要素にも同じ画像フィルターを適用することが可能です。
JavaScriptによるグリッチ（RGBシフト）効果
通常のCSSフィルターに加えて、画像の赤（Red）と青（Blue）のチャンネルをピクセル単位でずらす「グリッチエフェクト」を実装しています。サイバーパンク風のデザインや、レトロなビデオのような視覚効果を簡単に作り出すことができます。
この効果はCSSだけでは表現できないため、JavaScriptとHTML5のCanvas APIを用いて処理を行っています。グリッチ効果を含んだ状態の画像は、最大1200ピクセルのサイズで直接デバイスにダウンロードして保存することが可能です。
サーバー不要の安全なローカル処理
画像の読み込みからフィルターの計算、CSSの生成に至るまで、すべての処理はユーザーのブラウザ内（クライアントサイド）で完結します。大切な写真や未公開のデザイン素材が外部のサーバーにアップロードされることは一切ないため、情報漏洩のリスクがなく安全に利用できます。
また、ブラウザのパフォーマンスを維持し、スマートフォンやタブレットでも快適に動作するよう、プレビューおよびダウンロード時の画像幅は最大1200ピクセルに制限されています。元の高解像度画像にフィルターを適用したい場合は、生成されたCSSコードをご自身の環境で適用してください。
よくある質問
1200ピクセル以上の大きな画像にフィルターを適用するにはどうすればよいですか？
本ツールで生成されたCSSのコードをコピーし、ご自身のWebサイトや開発環境で元の高解像度画像（<code><img></code>タグなど）に対して適用してください。ツール上でのプレビューとダウンロードは、動作パフォーマンスを維持するため最大1200ピクセルに制限されています。
グリッチ効果のCSSコードを取得することはできますか？
グリッチ（RGBシフト）効果は純粋なCSSのプロパティだけでは再現できません。JavaScriptとCanvas APIを使用してピクセル単位で色をずらしているため、CSSコードとしては出力されず、画像としてのダウンロードのみに対応しています。
複数の画像を一度に一括処理することは可能ですか？
現在、複数画像の一括処理（バッチ処理）には対応していません。画像は1枚ずつ読み込み、フィルターの調整とCSSコードのコピー、または画像のダウンロードを行ってください。
ブラウザによってフィルターの見た目に違いはありますか？
本ツールはCSSの<code>filter</code>プロパティを利用しているため、お使いのブラウザのレンダリングエンジンによって、色合いやぼかし具合などの見た目がわずかに異なる場合があります。主要なモダンブラウザ間で大きな差はありませんが、厳密なデザインが求められる場合は各環境でのプレビューをご確認ください。
処理した画像を元の解像度のまま保存（ダウンロード）できますか？
ブラウザの動作を軽くするため、ダウンロードされる画像は最大幅1200ピクセルに縮小されます。元の解像度を維持したい場合は、ツールからCSSコードをコピーし、ご自身のサーバー等で適用することをおすすめします。
ツールの不具合や改善案はありますか。 フィードバックを送る