CSS Filter Generator

Acerca de esta herramienta

El Generador de Filtros CSS permite ajustar visualmente nueve funciones de filtro CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate y sepia — y ver el efecto combinado en tiempo real. Los filtros en su valor predeterminado se excluyen automáticamente.

Los filtros CSS aplican efectos visuales similares a software de edición de fotos. Están acelerados por GPU y funcionan en imágenes, fondos, texto y cualquier elemento HTML. Todo el procesamiento ocurre en el navegador.

Cómo usar

1. Arrastra cualquier control deslizante para aplicar ese efecto de filtro.
2. Combina múltiples filtros — la vista previa se actualiza en vivo.
3. Los filtros con valores predeterminados se excluyen automáticamente del resultado.
4. Haz clic en Restablecer todo para volver a los valores predeterminados.
5. Haz clic en Copiar para copiar la propiedad CSS filter.

Casos de uso

Los diseñadores usan grayscale y sepia en imágenes para secciones monocromas. Los desarrolladores usan blur para fondos de vidrio esmerilado. Las interacciones de hover usan brightness. Las implementaciones de modo oscuro usan filtros invert.

Preguntas frecuentes

• ¿Cuál es la diferencia entre filter y backdrop-filter? — filter se aplica al elemento y a todos sus hijos. backdrop-filter se aplica solo al área detrás del elemento (útil para superposiciones de vidrio esmerilado).
• ¿Puedo combinar múltiples filtros? — Sí. Enuméralos separados por espacios en la propiedad filter. Esta herramienta lo hace automáticamente.
• ¿Los filtros CSS afectan el rendimiento? — Los filtros simples como grayscale y brightness son baratos. El blur es más costoso, especialmente en áreas grandes — úsalo con moderación en móviles.