لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مولد تأثيرات مرشحات 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 (بكسل): 4

إزاحة Y (بكسل): 4

نصف قطر التمويه (بكسل): 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) كيف تؤثر نطاق المُختار على المتغير المخصص؟

خصائص

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 المسائل الشائعة التي يجب مراقبتها 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.