Cómo - Agregar efectos de imagen
Aprenda a agregar efectos visuales a las imágenes.
Filtros de imagen
Filtros CSS
La propiedad CSS filter
agrega efectos visuales (como desenfoque y saturación) a un elemento.
Nota: la propiedad de filtro no es compatible con Internet Explorer, Edge 12 o Safari 5.1 y versiones anteriores.
Ejemplo de escala de grises
Cambia el color de todas las imágenes a blanco y negro (100% gris):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Ejemplo de desenfoque
Aplique un efecto de desenfoque a todas las imágenes:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
Vaya a nuestra propiedad de filtro CSS para obtener más información sobre los filtros CSS.