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