Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Efeitos de Filtro SVG

CorDesenvolvedorImagem

ANUNCIADO Remover?

ENTRADA

Processo Automático

Tipo de Filtro

Filtro

ID do Filtro

Usado como o ID do filtro SVG e referência da URL no CSS

Configurações de Blur

stdDeviation (px): 4

Configurações de Rotação de Tom

Ângulo (graus): 90

Configurações de Saturação

Quantidade (0 = escala de cinza, 1 = original): 1.6

Turbulência & Distorção

Frequência Básica: 0.04

Octávos: 3

Tipo de Ruído

Escala de Deslocamento: 25

Configurações de Sombra de Projeto

Deslocamento X (px): 4

Deslocamento Y (px): 4

Raio de Desfoque (px): 6

Cor da Sombra

Transparência da Sombra: 0.6

Configurações de Emboço

Estilo

Objetivo de Prévia

Exibir em

SAÍDA

Lado cliente

Visualização ao Vivo

XML do Filtro SVG

Uso no CSS

ANUNCIADO Remover?

Guia

Projete efeitos de filtro SVG visualmente. Escolha um primitivo de filtro — desfoque gaussiano, variações de matriz de cor (rotação de tom, saturação, luminância para alfa),

Gerador de Efeitos de Filtro SVG

Designar SVG <filter> efetua visualmente. Escolha um primitivo de filtro — desfoque gaussiano, variações de matriz de cor (rotação de tom, saturação, luminância para alfa), turbulência com deslocamento, sombra de projeto ou um pré-definido de matriz de convolução (emboço, inscrição, aprimoramento, detecção de contorno) — e ajuste seus parâmetros com sliders enquanto observa uma prévia SVG em texto, formas ou sua própria foto carregada. Copie o bloco gerado <filter> XML e um trecho pronto para colar de uso no CSS.

Como usar

Escolha um primitivo de filtro no Filtro menu de seleção.
Defina um ID do Filtro — ele se torna o id no elemento e o alvo do <filter> Ajuste os parâmetros que aparecem para o primitivo escolhido (slides, seleção de cor, tipo de ruído, etc.). url(#…).
Mude o
entre texto, formas ou foto — carregue sua própria imagem para ver o efeito em conteúdo real. Objetivo de Prévia na sua página (pode estar em qualquer lugar — mesmo dentro de um SVG oculto e de tamanho zero).
Copie o gerado XML do Filtro SVG Aplicá-lo no CSS com o trecho incluído: seja a abreviação nativa (quando disponível) ou o
Sete primitivos de filtro filter: url(#filterId) Exportação de tokens como JSON para uso em um site de documentação ou entrada do Storybook.

Características

— desfoque gaussiano, rotação de tom, saturação, luminância para alfa, turbulência com deslocamento, sombra de projeto e pré-definições de matriz de convolução (emboço, inscrição, aprimoramento, detecção de contorno). — feedback visual imediato enquanto arrasta os sliders; sem etapa de reconstrução, sem piscar.
Visualização SVG em tempo real Três alvos de prévia
— aplique em texto claro, formas primitivas ou sua própria foto carregada para ver como o filtro se comporta em conteúdo real. Dois resultados
— o bloco completo XML (pronto para colar em qualquer SVG) e um trecho de uso no CSS com a abreviação nativa quando disponível. <filter> Sombra com opacidade
— combina , que a abreviação nativa do CSS não pode expressar. feDropShadow com flood-opacityIDs de filtro sanitizados
— mantém seus valores seguros para id Qual a diferença entre um filtro CSS e um filtro SVG? url(#…) Lado do cliente

 Perguntas frequentes

As abreviações CSS (desfoque, rotação de tom, sombra de projeto, etc.) são um catálogo fixo de efeitos que o navegador mapeia para primitivos de filtro SVG. Um filtro SVG oferece acesso direto a essas primitivas — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix e mais — e permite que você os compose em efeitos (distorções, ruído, emboços, manipulação de canais) que as abreviações não podem expressar. Tudo que você pode fazer no CSS, você pode fazer no SVG, mas o inverso não é verdadeiro.

O que significa a atributo stdDeviation no feGaussianBlur?
stdDeviation é o desvio padrão da distribuição gaussiana usada para ponderar os pixels vizinhos. Um valor maior espalha a ponderação por mais pixels, produzindo um resultado mais borrado. Você pode passar um número (desfoque uniforme em ambos os eixos) ou dois números separados por espaço (quantidades diferentes de desfoque em X e Y) para criar suavidade direcional.

Como o feTurbulence funciona e por que combiná-lo com o feDisplacementMap?
O feTurbulence gera proceduralmente ruído de estilo Perlin em uma imagem SVG, controlado pela baseFrequency (escala do ruído) e numOctaves (níveis de detalhe). O ruído sozinho é apenas uma textura colorida. O feDisplacementMap usa esse ruído como in2 e utiliza os canais R/G para deslocar os pixels da sua imagem de origem, produzindo efeitos orgânicos de distorção, fumaça, ondas de água e distorção. O atributo scale controla a distância máxima que cada pixel pode ser deslocado.

O que é uma matriz de kernel e como o feConvolveMatrix produz efeitos de emboço ou de contorno?
O feConvolveMatrix desliza uma pequena matriz (o kernel) sobre cada pixel, multiplicando cada célula pelo pixel vizinho correspondente e somando o resultado. Diferentes kernels produzem efeitos diferentes: um kernel que subtrai os vizinhos superior-esquerdo dos inferior-direito cria a sombra direcional que lemos como emboço; um kernel com -1 ao redor de um centro positivo amplifica as diferenças e produz detecção de contorno ou aprimoramento. O atributo order define o tamanho do kernel (normalmente 3 para uma matriz 3x3), e divisor/bias normalizam a saída.

Por que meu filtro SVG não funciona quando aplicado com CSS filter: url(#id)?
Três causas comuns: (1) o elemento não está no DOM quando a regra CSS é aplicada — certifique-se de que o filtro SVG está embutido inline na página, e não carregado de um arquivo externo bloqueado pelo navegador. (2) O ID que você referencia não corresponde ao ID no elemento (sensível a maiúsculas e minúsculas, deve ser único). (3) O elemento que está sendo filtrado tem tamanho zero ou é cortado pelo região de filtro padrão — defina explicitamente x, y, width, height no (muitas vezes x="-30%" y="-30%" width="160%" height="160%") para que efeitos como desfoque ou sombra de projeto que ultrapassam os limites da imagem não sejam cortados.

myFilter