Generador de filtros CSS
Generador de filtros CSS: coloca una cadena filter en una clase CSS lista para copiar.
Envolver una cadena filter
Escribe funciones CSS como «grayscale(100%) contrast(1.1)». La herramienta devuelve una regla .imagen con ese contenido tras filter:. No interpreta los parámetros, no corrige unidades y no separa cada función en controles individuales.
El orden cambia el resultado
Las funciones se aplican de izquierda a derecha sobre la salida de la anterior. Por eso blur seguido de contrast no siempre produce los mismos píxeles que contrast seguido de blur. Mantén el orden elegido cuando copies la receta entre proyectos.
Funciones y unidades
CSS admite funciones como blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() y drop-shadow(), cada una con valores permitidos. Por ejemplo, blur suele necesitar una longitud y hue-rotate un ángulo. Consulta la sintaxis si el navegador ignora la declaración.
Ejemplo de blanco y negro contrastado
«grayscale(100%) contrast(1.1)» retira la saturación y después aumenta el contraste del resultado en un diez por ciento respecto del valor base. La regla afecta al elemento renderizado completo, incluidas imágenes o descendientes que formen parte de su composición visual.
Validar sobre la imagen real
No hay previsualización ni comprobación de compatibilidad en el generador. Pega el CSS en el navegador objetivo y compara detalles, texto superpuesto y rendimiento. Filtros intensos pueden reducir legibilidad o exigir trabajo gráfico adicional, especialmente al animarse sobre áreas grandes.
drop-shadow() sigue la silueta alfa del contenido, mientras una box-shadow normal rodea su caja. Si combinas drop-shadow con blur o opacity, la posición en la cadena afecta también a la sombra. El inspector del navegador permite desactivar funciones una por una para localizar cuál causa un resultado inesperado.
filter crea efectos sobre el elemento ya compuesto y puede establecer un nuevo contexto de apilamiento. Si una capa cambia de posición respecto de otras tras añadirlo, revisa z-index y el contexto del padre. Este comportamiento de maquetación no se ve en la cadena generada por sí sola.
Restaurar el aspecto original
Usa filter: none para retirar todas las funciones de una regla anterior. Establecer solo grayscale(0%) no desactiva blur, contraste o sombras que sigan en la cadena. En estados hover, define tanto el estado normal como el activo para que la transición tenga puntos de inicio y final claros.
Fuentes y referencias
Continúa con estas herramientas
Preguntas frecuentes
¿La herramienta comprueba si mi filter es válido?
No. Inserta la cadena dentro de la declaración y el navegador decide qué puede aplicar.
¿Da igual cambiar el orden de las funciones?
No. Cada filtro recibe el resultado del anterior, por lo que la secuencia puede alterar la imagen.
¿Cómo desenfoco una imagen?
Una forma habitual es blur(4px); ajusta la longitud y comprueba los bordes en tu diseño.
¿Puedo combinar varias funciones?
Sí, escríbelas separadas por espacios dentro de la misma cadena filter.
¿Afecta al archivo original?
No. CSS modifica la presentación renderizada y no reescribe los píxeles del archivo fuente.
¿Incluye vista previa?
No en este generador. Debes probar la regla en una página o inspector CSS.
Herramienta de OCC Tools