広告が嫌いですか? 行く広告なし今日 

SVGフィルター効果ジェネレーター

色開発者画像

広告削除する？

入力

自動処理

Filter Type

フィルター

Filter ID

Used as the SVG filter id and CSS url() reference

Blur Settings

stdDeviation (px): 4

Hue Rotate Settings

角度（度）: 90

Saturate Settings

Amount (0 = grayscale, 1 = original): 1.6

Turbulence & Distortion

基本周波数： 0.04

オクターブ： 3

ノイズタイプ

Displacement Scale: 25

Drop Shadow Settings

オフセットX（px）： 4

オフセットY（px）： 4

ぼかし半径（px）： 6

影の色

Shadow Opacity: 0.6

Emboss Settings

スタイル

Preview Target

Show On

出力

クライアント側

ライブプレビュー

SVG Filter XML

CSS Usage

広告削除する？

ガイド

SVGフィルター効果ジェネレーター

Design SVG <filter> effects visually. Pick a filter primitive — Gaussian blur, color matrix variants (hue rotate, saturate, luminance to alpha), turbulence with displacement, drop shadow, or a convolve matrix preset (emboss, engrave, sharpen, edge detect) — and tune its parameters with sliders while watching a live SVG preview on text, shapes, or your own uploaded photo. Copy the generated <filter> XML block and a ready-to-paste CSS usage snippet.

使用方法

Pick a filter primitive from the フィルター dropdown.
Set a unique Filter ID — it becomes the id on the <filter> element and the target of url(#…).
Tune the parameters that appear for the chosen primitive (sliders, color picker, noise type, etc.).
Switch the Preview Target between text, shapes, or photo — upload your own image to see the effect on real content.
をコピーするか、ダウンロードアイコンをクリックしてください。生成された SVG Filter XML into your page (it can live anywhere — even inside a hidden, zero-size SVG).
Apply it in CSS with the included snippet: either the native shorthand (when available) or the filter: url(#filterId) CSSカスタムプロパティとは何ですか？

機能

Seven filter primitives — Gaussian blur, hue rotate, saturate, luminance to alpha, turbulence + displacement, drop shadow, and convolve-matrix presets (emboss, engrave, sharpen, edge detect).
リアルタイムSVGプレビュー — instant visual feedback as you drag sliders; no rebuild step, no flicker.
Three preview targets — apply to crisp text, primitive shapes, or your own uploaded photo to see how the filter behaves on real content.
Two outputs — the full <filter> XML block (ready to paste into any SVG) and a CSS usage snippet with the native shorthand where available.
Drop shadow with opacity — combines feDropShadow は迅速なパスだが、属性の扱いが不一致であり、エッジケースでデータを失う可能性がある。SOAPレスポンスのプロダクション用途では、 flood-opacity, which the native CSS shorthand cannot express.
Sanitized filter IDs — keeps your id values safe for url(#…) 参照を検出します。

 よくある質問

What is the difference between a CSS filter and an SVG filter?

CSS filter shorthands (blur, hue-rotate, drop-shadow, etc.) are a fixed catalogue of effects that the browser maps to underlying SVG filter primitives. An SVG <filter> gives you direct access to those primitives — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix, and more — and lets you compose them into effects (warps, noise, embosses, channel manipulation) that the shorthand cannot express. Anything you can do in CSS, you can do in SVG, but the reverse is not true.
What does the stdDeviation attribute mean on feGaussianBlur?

stdDeviation is the standard deviation of the Gaussian distribution used to weight neighbouring pixels. A larger value spreads the weighting across more pixels, producing a blurrier result. You can pass one number (uniform blur in both axes) or two space-separated numbers (different blur amounts on X and Y) for directional softness.
How does feTurbulence work, and why pair it with feDisplacementMap?

feTurbulence procedurally generates Perlin-style noise into an SVG image, controlled by baseFrequency (noise scale) and numOctaves (detail levels). The noise on its own is just a coloured texture. feDisplacementMap takes that noise as in2 and uses its R/G channels to offset the pixels of your source graphic, producing organic warping, smoke, water ripple, and distortion effects. The scale attribute controls how far each pixel can be displaced.
What is a kernel matrix, and how does feConvolveMatrix produce emboss or edge effects?

feConvolveMatrix slides a small matrix (the kernel) over every pixel, multiplying each cell by the corresponding neighbour pixel and summing the result. Different kernels produce different effects: a kernel that subtracts top-left from bottom-right neighbours creates the directional shading we read as emboss; a kernel with -1 around a positive centre amplifies differences and produces edge detection or sharpening. The order attribute sets the kernel size (typically 3 for a 3x3 matrix), and divisor/bias normalize the output.
Why does my SVG filter not work when applied with CSS filter: url(#id)?

Three common causes: (1) the <filter> element is not in the DOM when the CSS rule applies — make sure the filter SVG is embedded inline in the page, not loaded from an external file the browser blocks. (2) The id you reference does not match the id on the <filter> element (case sensitive, must be unique). (3) The element you are filtering has zero size or is clipped by the default filter region — set explicit x, y, width, height on the <filter> (often x="-30%" y="-30%" width="160%" height="160%") so effects like blur or drop shadow that extend past the source bounds are not cut off.