¿Qué son los filtros CSS?

Introducidos en CSS3, los filtros permiten modificar la representación gráfica de un elemento (imágenes, <div>, <svg>, etc.) directamente en el navegador. Entre los más usados están blur() (desenfoque) y brightness() (brillo).

Sintaxis básica de filter

selector {
  filter: blur(5px) brightness(1.2);
}

Los valores pueden encadenarse, separándose por espacios. Cada función recibe su propio parámetro.

1️⃣ blur() – Desenfoque

Aplica un desenfoque gaussiano al elemento. El valor es la distancia del radio en píxeles.

Ejemplo básico

.foto {
  width: 300px;
  filter: blur(4px);
}

🔎 Usa blur(0) para eliminar el efecto sin cambiar otras reglas.

2️⃣ brightness() – Brillo

Modifica la luminosidad del elemento. 1 es el valor original; 0 lo vuelve negro y valores mayores a 1 lo hacen más claro.

Ejemplo básico

.logo {
  filter: brightness(0.6);
}

💡 Un valor brightness(0.5) reduce el brillo al 50%.

🔄 Comparativa rápida

3️⃣ Combinando blur y brightness

Encadenar filtros permite crear efectos sofisticados, por ejemplo un fondo difuminado y oscurecido para destacar contenido superpuesto.

.fondo-hero {
  background-image: url('hero.jpg');
  height: 400px;
  filter: blur(8px) brightness(0.6);
  /* Aseguramos que el contenido superpuesto sea legible */
}

Título destacado

🖥️ Compatibilidad y fallback

Los filtros están soportados en todos los navegadores modernos (Chrome, Edge, Firefox, Safari) a partir de sus versiones 35+. Para navegadores antiguos puedes usar @supports o proporcionar versiones sin filtro.

@supports (filter: blur(1px)) {
  .img { filter: blur(2px); }
}
@supports not (filter: blur(1px)) {
  .img { /* Fallback: usar una imagen pre‑desenfocada */
    background-image: url('blurred.jpg');
  }
}

⚡ Rendimiento y buenas prácticas

• GPU acceleration: Los navegadores usan la GPU para aplicar filtros, pero aplicar cientos de elementos con filtros pesados puede saturar la GPU.
• Usar unidades razonables: Un blur(20px) en imágenes grandes afecta la velocidad.
• Prefer‑reduced‑motion: Respeta la preferencia del usuario. Ejemplo:

@media (prefers-reduced-motion: reduce) {
  .animado { filter: none; }
}

📚 Casos de uso del mundo real

1. Galerías de imágenes: Al pasar el cursor, blur(0) revela la foto nítida mientras el resto permanece difuminado.
2. Modales de confirmación: Desenfocar el fondo (blur(5px) brightness(0.7)) para centrar la atención.
3. Modo oscuro dinámico: Cambiar brightness(0.8) en todo el sitio cuando el usuario activa dark mode.

🛠️ Solución de problemas comunes

• Filtros no se aplican: Verifica que el elemento no tenga overflow: hidden que recorte el efecto.
• Desenfoque excesivo en retina: Usa valores más bajos o combina con scale() para mantener nitidez.
• Conflicto con backdrop-filter: Asegúrate de que el elemento tenga un fondo semitransparente (background: rgba(255,255,255,0.5)).