Generador de filtros CSS
Controles de filtro
Vista previa en vivo
Acerca del generador de filtros CSS
Los filtros CSS te permiten aplicar efectos visuales como desenfoque, contraste y rotación de tono directamente en el navegador.
Esta herramienta le ayuda a crear cadenas de filtro, obtener una vista previa de ellas en vivo y analizar los valores de filtro CSS existentes nuevamente en controles editables.
como usarlo
- Mueva los controles deslizantes o edite los valores manualmente.
- Vea la actualización de la vista previa en tiempo real.
- Haga clic en Generar para normalizar la cadena de filtro.
- Pegue un valor de filtro existente y haga clic en Analizar para editarlo.
Consejos
- Utilice el brillo y el contraste juntos para lograr cambios visuales más fuertes.
- La rotación de tono y la saturación son útiles para experimentos temáticos rápidos.
- La escala de grises y el sepia son útiles para efectos apagados o vintage.
- Los valores de desenfoque pequeños suelen verse mejor que los grandes en el trabajo de la interfaz de usuario.
Comprobaciones de CSS filter antes de modificar contenido
Las funciones se componen en orden y afectan contraste, significado del color, clipping, stacking y coste de GPU.
Verifica el orden
Compara la cadena final porque brightness, contrast, hue, saturation, blur y drop-shadow no son intercambiables.
Protege colores semánticos
Revisa estados, gráficos, recursos de marca, tonos de piel y elementos disabled tras aplicar filtros.
Inspecciona los límites
Prueba blur y drop-shadow cerca de overflow, esquinas redondeadas, transforms, elementos adyacentes y scroll.
Mide el coste de interacción
Perfila transitions y animations sobre imágenes o containers grandes y evita filtrado continuo innecesario.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.