SVGフィルター ジェネレーター
スライダーでぼかしや明るさを調整し、SVGフィルターのコードを生成
ぼかし、明るさ、コントラスト、彩度、色相回転、セピア、反転など8種類の効果をスライダーで調整しながら、円・四角形・星のプレビューで結果をその場で確認できるツールです。仕上げた効果は <filter> のSVGコードとCSSの適用例としてすぐにコピーでき、WebデザイナーやフロントエンドエンジニアがCSSのfilterより細かいカスタムフィルターを作りたいときに便利です。処理はすべてブラウザ内で行われ、サーバーへ送信されることはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- プレビュー図形（円・四角形・星）から1つを選びます
- ぼかし・明るさ・コントラスト・彩度・色相回転・不透明度・セピア・反転の各スライダーを調整します
- 上部のプレビューで、効果がリアルタイムに適用される様子を確認します
- 完成したSVGフィルターのコードをコピーボタンで取得し、HTML/CSSに貼り付けます
よくある質問
- CSSのfilterプロパティと何が違いますか？
- SVGの<filter>は feComponentTransfer や feColorMatrix などを直接組み合わせて作るため、CSSのfilter単体よりも緻密で柔軟な制御ができます。生成されたコードは filter: url(#id) の形でCSSからそのまま適用できます。
- 生成したフィルターは実際の画像にも使えますか？
- はい。プレビューは図形で表示されますが、コピーしたSVGコードをHTMLに挿入したうえで、imgなどの要素に filter: url(#ut-custom-filter) を適用すれば同じ効果がそのまま反映されます。
- 値を最初の状態に戻すにはどうすればよいですか？
- リセットボタンを押すと、すべてのスライダーが初期値（ぼかし0、明るさ・コントラスト・彩度・不透明度1、色相回転・セピア・反転0）に戻ります。