Filtros CSS

Los filtros CSS permiten aplicar efectos visuales a imágenes y otros elementos. Traen al navegador funciones conocidas de editores gráficos como desenfoque, escala de grises o contraste.

Fundamentos de la propiedad filter

La propiedad <filter> en CSS habilita efectos como blur, brightness o contrast. Se pueden encadenar varios efectos a la vez.

Filtrado de imágenes

Los filtros se aplican mayormente a imágenes, por ejemplo, volviéndolas en escala de grises, desenfocadas o coloreadas. Son útiles para resaltar diseño o efectos hover.

Detalles del Código

<img src="https://placehold.co/200x100/png" style="filter: grayscale(100%);">

<img src="https://placehold.co/200x100/png" style="filter: blur(5px);">

Vista Previa

Sombras y efectos especiales

El filtro drop-shadow es especialmente popular, ya que crea un efecto de sombra natural. A diferencia de box-shadow, respeta la transparencia de la imagen.

Consejos para usar filtros

Los filtros son potentes, pero hay que cuidar el rendimiento y la experiencia del usuario.

• Evita combinar demasiados filtros, puede ralentizar la página.
• Usa efectos hover con filtros para resaltar visualmente.
• Prueba los efectos en distintos navegadores, ya que puede haber diferencias.