Generador de Filtros CSS
Suelta una imagen (opcional), arrastra los deslizadores, copia el valor CSS
filter.
Haz clic o suelta una imagen para previsualizar sobre ella, opcional
Cómo funciona
Cada deslizador se corresponde directamente con una función CSS filter
(blur(), brightness(), contrast(),
saturate(), grayscale(), sepia(),
hue-rotate(), invert()). Las funciones que se quedan en su valor
neutro se omiten del resultado para mantener el CSS copiado al mínimo, y las restantes se
unen con espacios, ya que CSS aplica las funciones de filtro encadenadas en el orden en que
se escriben. Esa misma cadena se aplica como el estilo filter propio de la
imagen de vista previa, así que lo que ves es el efecto real, no una simulación.
Tu imagen se carga como una URL de objeto local y nunca sale de la pestaña del navegador; no hay ningún paso de subida.
Preguntas frecuentes
¿Puedo previsualizar esto sobre mi propia imagen?
Sí, suelta cualquier imagen y cada deslizador actualiza la vista previa en vivo al instante. Sin una imagen subida, los deslizadores se previsualizan sobre un degradado de marcador de posición.
¿Afecta filter al layout?
No. El filter de CSS es un efecto puramente visual, nunca cambia el tamaño o la posición de la caja de un elemento, a diferencia de cambiar el archivo de imagen real. Eso hace que sea barato activarlo con hover o con una clase, ya que nada se reajusta (reflow).
¿Se sube mi imagen a algún sitio?
No. La vista previa usa el propio motor CSS de tu navegador sobre una URL de objeto local. No se sube nada.