Filtros CSS: la propiedad filter con ejemplos (2026)

Los filtros CSS aplican efectos gráficos —desenfoque, blanco y negro, brillo, sombra— a cualquier elemento sin tocar la imagen original ni abrir Photoshop. Todo con una sola propiedad: filter. Aquí tienes cada función con su sintaxis y código listo para copiar.

Qué es la propiedad filter en CSS

La propiedad filter recibe una o varias funciones y las aplica al elemento. Se usa muchísimo en imágenes, pero funciona en casi cualquier elemento. La estructura es siempre la misma:

.elemento {
  filter: grayscale(100%);
}

Filtro gris: escala de grises (grayscale)

El más pedido. Convierte a blanco y negro. Con 100% es gris total; con 50%, medio desaturado. Un clásico: la imagen en gris que recupera el color al pasar el ratón.

img {
  filter: grayscale(100%);
  transition: filter .3s ease;
}
img:hover {
  filter: grayscale(0%);
}

Desenfoque (blur)

Difumina el elemento. El valor va en píxeles: cuanto mayor, más desenfoque. Útil para fondos o placeholders mientras carga una imagen.

.fondo {
  filter: blur(6px);
}

Brillo y contraste (brightness, contrast)

Con 1 (o 100%) dejas el valor original; por encima, más; por debajo, menos. Sirven para oscurecer una imagen bajo un texto o dar más punch.

.imagen {
  filter: brightness(0.7) contrast(1.2);
}

Sepia, invertir y saturación

sepia() da el tono antiguo; invert() invierte los colores (útil para un modo oscuro rápido de iconos); saturate() sube o baja la intensidad del color.

.vintage { filter: sepia(80%); }
.negativo { filter: invert(100%); }
.vivo { filter: saturate(1.8); }

Cambiar el tono (hue-rotate)

Gira la rueda de color los grados que le indiques. Genial para recolorear un icono o generar variantes de una misma imagen.

.icono {
  filter: hue-rotate(120deg);
}

Sombra que respeta la transparencia (drop-shadow)

A diferencia de box-shadow, drop-shadow sigue el contorno real de un PNG o SVG con transparencia, no la caja. Ideal para logos e iconos recortados.

.logo {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,.4));
}

Combinar varios filtros

Encadena las funciones separadas por espacios. Se aplican en orden, así que el resultado cambia según cómo las ordenes.

.destacada {
  filter: grayscale(100%) contrast(1.1) blur(1px);
}

Bonus: backdrop-filter (efecto cristal)

Mientras filter afecta al propio elemento, backdrop-filter afecta a lo que hay detrás. Es la clave del efecto cristal esmerilado (glassmorphism) de menús y tarjetas.

.tarjeta-cristal {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
}

Más CSS en el blog

• CSS Flexbox paso a paso
• Microinteracciones con CSS
• Todos los artículos de CSS

Preguntas frecuentes

¿Cómo poner una imagen en blanco y negro con CSS?

Con filter: grayscale(100%);. Es el «filtro gris» de CSS. Con transición, recupera el color al pasar el ratón.

¿Se pueden combinar varios filtros CSS?

Sí, se encadenan separados por espacios: filter: grayscale(100%) blur(2px); Se aplican en ese orden.

¿Qué diferencia hay entre filter y backdrop-filter?

filter afecta al propio elemento; backdrop-filter afecta a lo que hay detrás, como el efecto cristal.

Copia los ejemplos, cámbiales los valores y verás el efecto al instante. Es de lo más agradecido de CSS.