Generador de filtros CSS
Ajuste visualmente un filtro CSS (desenfoque, brillo, contraste, saturación, escala de grises, sepia, inversión, rotación de tono) sobre una imagen de vista previa y copie después el código filter obtenido. No se envía nada a un servidor: todo se calcula directamente en su navegador.
Cómo funciona
La propiedad CSS filter aplica efectos gráficos (desenfoque, brillo, contraste...) directamente en el navegador, sin retocar la imagen de origen. Esta herramienta le permite combinar varios efectos a la vez sobre una vista previa en directo y obtener después el valor exacto para pegarlo en su hoja de estilos, en una imagen, una miniatura de galería o un efecto al pasar el ratón.
¿El filtro CSS modifica el archivo de imagen original?
No. filter es un efecto puramente visual que el navegador aplica al renderizar el elemento: el archivo de imagen permanece intacto en el disco. Para obtener una imagen modificada de forma definitiva, habría que redibujarla en un canvas y exportarla.
¿Se puede animar un filtro CSS al pasar el ratón?
Sí: combinando la propiedad con una regla :hover y una transition sobre filter, el efecto pasa progresivamente de un estado a otro, un recurso habitual en las miniaturas de portafolio o las tarjetas de producto.
No se transmite ninguna imagen ni dato a un servidor: el cálculo del filtro se ejecuta únicamente en su navegador.