Generador de filtros SVG
Ajusta desenfoque, brillo y más con sliders y genera código de filtro SVG
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta permite ajustar ocho efectos visuales —desenfoque, brillo, contraste, saturación, rotación de tono, opacidad, sepia e inversión— mediante controles deslizantes, con vista previa en vivo sobre un círculo, un rectángulo o una estrella. El efecto terminado se puede copiar al instante como código de <filter> SVG junto con un fragmento CSS listo para usar, lo que resulta útil para diseñadores web o desarrolladores frontend que necesitan un control más preciso que la propiedad CSS filter por sí sola. Todo se procesa localmente en el navegador, sin enviar nada a un servidor.
Cómo usar
- Elige una forma de vista previa: círculo, rectángulo o estrella
- Ajusta los controles de desenfoque, brillo, contraste, saturación, rotación de tono, opacidad, sepia e inversión
- Observa cómo el efecto se actualiza en tiempo real en el panel superior
- Copia el código de filtro SVG generado y pégalo en tu HTML/CSS
Preguntas frecuentes
- ¿En qué se diferencia de la propiedad CSS filter?
- Un <filter> SVG combina directamente primitivas como feComponentTransfer y feColorMatrix, ofreciendo un control más fino y flexible que la propiedad CSS filter por sí sola. El código generado se aplica en CSS como filter: url(#id).
- ¿Puedo usar el filtro generado en una imagen real?
- Sí. La vista previa usa una forma, pero al pegar el código SVG copiado en tu HTML, puedes aplicar filter: url(#ut-custom-filter) a una imagen o cualquier otro elemento para lograr el mismo efecto.
- ¿Cómo restablezco los valores?
- Pulsa el botón Restablecer para devolver todos los controles a sus valores predeterminados (desenfoque 0, brillo/contraste/saturación/opacidad 1, rotación de tono/sepia/inversión 0).