Черно-белое изображение

 alexei 23/12/2020 - 08:59

Как преобразовать любое цветное изображение в черно-белое при помощи CSS.

Черно-белое изображение

Оригинальное изображение

Ананас

Градации серого (100%)

Ананас

Для преобразования цветного изображения в черно-белое (все оттенки серого) используем CSS свойство filter.

Изменяем цвет всех изображений на черно-белый (все оттенки серого):


img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}