Generador de filtros SVG
Ajusta desenfoque, brillo y más con deslizadores y obtén el código del filtro SVG
Ajusta ocho efectos (desenfoque, brillo, contraste, saturación, rotación de tono, sepia, inversión y opacidad) con deslizadores y comprueba el resultado al momento sobre una vista previa en forma de círculo, cuadrado o estrella. Cuando tengas el efecto listo, copia el código <filter> de SVG junto con el ejemplo de uso en CSS. Es ideal para diseñadores web y desarrolladores front-end que necesitan un filtro más fino que el que ofrece la propiedad CSS filter. Todo se calcula en el navegador, sin enviar nada a ningún servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige la forma de la vista previa: círculo, cuadrado o estrella
- Mueve los deslizadores de desenfoque, brillo, contraste, saturación, rotación de tono, opacidad, sepia e inversión
- Observa cómo el efecto se aplica en tiempo real sobre la vista previa superior
- Copia el código del filtro SVG resultante y pégalo en tu HTML/CSS
Preguntas frecuentes
- ¿En qué se diferencia de la propiedad CSS filter?
- Un <filter> de SVG se construye combinando primitivas como feComponentTransfer o feColorMatrix, lo que da un control mucho más fino y flexible que usar solo la propiedad CSS filter. El código generado se aplica igualmente desde CSS con filter: url(#id).
- ¿Puedo aplicar el filtro a imágenes reales?
- Sí. La vista previa usa formas geométricas, pero si insertas el código SVG copiado en tu HTML y aplicas filter: url(#ut-custom-filter) a un img o a cualquier otro elemento, el efecto será idéntico.
- ¿Cómo vuelvo a los valores iniciales?
- Pulsa el botón de reiniciar y todos los deslizadores regresan a sus valores por defecto: desenfoque en 0; brillo, contraste, saturación y opacidad en 1; rotación de tono, sepia e inversión en 0.