Qué es Generador de Filtros CSS?
El Generador de Filtros CSS es un campo de juegos visual para la propiedad CSS filter. En lugar de escribir filter: blur(3px) grayscale(50%) manualmente, ajusta controles deslizantes para cada función.
Respuesta rápida
Aplique filtros CSS a un elemento de vista previa o imagen. Ajuste cada filtro con controles deslizantes y vea el resultado al instante. Copie la propiedad CSS filter.
Last updated: 2026-06-11
Limitaciones
- La función de filtro drop-shadow no está incluida.
- La vista previa usa la propiedad CSS filter que se aplica a todo el elemento.
- La vista previa de imagen requiere una URL HTTPS pública.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ajuste los controles deslizantes: Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Saturate, Sepia y Opacity.
- Observe la vista previa en vivo actualizarse en tiempo real sobre una muestra de degradado colorido.
- Opcionalmente pegue una URL de imagen pública para previsualizar filtros en una foto real.
- Copie la propiedad CSS filter del panel de salida.
Para qué puedes usarla
- Previsualizar combinaciones de filtros CSS antes de aplicarlas a una galería de imágenes.
- Probar valores de filtro en una foto de producto para animación de escala de grises a color.
- Generar rápidamente un filtro sepia para una galería de fotos vintage.