Efectos de filtro SVG: Trucos de desenfoque, sombra y color para diseñadores

Para diseñadores que quieren un acabado visual impecable sin salir del editor de código · Junio 2026 · 5 min de lectura

Un cliente me pidió que añadiera un efecto de glassmorfismo a su sección hero: desenfoque, transparencia, un brillo interno sutil. El desarrollador sugirió una superposición de PNG. Yo no estuve de acuerdo: un filtro SVG hace lo mismo en 12 líneas de código, carga al instante y escala a cualquier tamaño de pantalla. Aquí te comparto lo que uso realmente, filtrado solo a los efectos que funcionan de forma fiable en todos los navegadores.

Sombras paralelas que se ven realmente bien

La propiedad CSS box-shadow funciona sobre la caja delimitadora del elemento. El elemento SVG feDropShadow funciona sobre la forma real del objeto. Para un icono de forma irregular o un trazado curvo, la diferencia es abismal:

<filter id="soft-shadow">
  <feDropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000" flood-opacity="0.15"/>
</filter>

Yo uso dx="2" dy="4" como ángulo de sombra predeterminado (imita una fuente de luz situada en la esquina superior izquierda). El parámetro stdDeviation controla el desenfoque: 2-3 para elementos de interfaz, 5-8 para gráficos de secciones hero. Los documentos de MDN sobre feDropShadow cubren la lista completa de parámetros, pero yo nunca he necesitado más que estos cuatro.

Desenfoque de fondo (Glassmorfismo sin el PNG)

feGaussianBlur es el elemento que hace todo el trabajo. Combinado con feComposite, crea el efecto de vidrio esmerilado que está por todas partes en las interfaces de 2026:

<filter id="glass">
  <feGaussianBlur in="BackgroundImage" stdDeviation="8"/>
  <feComposite in="SourceGraphic" operator="over"/>
</filter>

El inconveniente: BackgroundImage solo funciona cuando el SVG está insertado directamente en el código HTML, no cuando se carga como un elemento <img> o como imagen de fondo. Lo aprendí por las malas después de 20 minutos preguntándome por qué no aparecía mi desenfoque. Si necesitas aplicar glassmorfismo en un SVG cargado con <img>, convierte primero el fondo a una capa ráster usando SVG2PNG.

Manipulación de color sin volver a exportar

feColorMatrix te permite modificar los colores directamente en el SVG, sin necesidad de volver a exportar desde Figma. Yo lo uso para los estados de hover y las variantes de iconos para modo oscuro:

<filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

<filter id="tint-blue">
  <feColorMatrix type="matrix" values="
    0.3 0   0   0  0
    0   0.3 0   0  0
    0   0   1   0  0
    0   0   0   1  0"/>
</filter>

Los valores de la matriz parecen intimidantes, pero yo no los calculo a mano. Uso fecolormatrix.com: mueve un control deslizante, copia los valores. El filtro de saturación con values="0" te da una escala de grises pura que funciona en todos los navegadores hasta IE11, a diferencia de la propiedad CSS filter: grayscale() que tiene un soporte irregular para SVG.

Añadir textura con feTurbulence

Este es el filtro al que recurro cuando un diseño se ve demasiado "limpio": genera ruido Perlin que puede simular grano de papel, grano de película o textura de acuarela:

<filter id="grain">
  <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" result="noise"/>
  <feColorMatrix type="saturate" values="0" in="noise" result="gray"/>
  <feBlend in="SourceGraphic" in2="gray" mode="multiply"/>
</filter>

Aplícalo a un rectángulo de fondo y obtienes una textura orgánica de solo 300 bytes en lugar de una imagen de textura JPEG de 200KB. Lo he usado en páginas de inicio de productos SaaS, ilustraciones editoriales, y una vez en el diseño de una etiqueta de vino (el cliente pensó que había usado una textura de papel escaneada, no le corregí).

Qué filtros evito usar

feDisplacementMap y feConvolveMatrix son muy potentes pero su renderizado es inconsistente entre navegadores. feComponentTransfer no funciona en Safari sin una solución alternativa. Y cualquier filtro con más de 4 primitivos encadenados hará caer el rendimiento en dispositivos móviles: he visto cómo un solo filtro demasiado complicado redujo la velocidad de una página de 60fps a 12fps en un iPhone SE.

Me quedo con los cuatro filtros que mencioné arriba. Cubren el 95% de las necesidades de diseño, son rápidos y funcionan en cualquier plataforma.

Jamie Park Escrito por Jamie Park — Diseñador UI/UX. Llevo 8 años diseñando interfaces y sistemas de diseño. Cree SVG2PNG después de cansarme de que los activos de los clientes estuvieran alojados en servidores aleatorios. Más sobre mí →