Функция CSS `grayscale()`

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с сентября 2016 года.

grayscale() — это CSS-функция, которая преобразует входное изображение в оттенки серого. Результатом является <filter-function>.

Попробуйте

filter: grayscale(0);

filter: grayscale(0.2);

filter: grayscale(60%);

filter: grayscale(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Синтаксис

grayscale(amount)

Параметры

amount Необязательный: Доля входного изображения, преобразуемая в оттенки серого. Задается как <number> или <percentage>. Значение 100% полностью преобразует входное изображение в оттенки серого, а значение 0% оставляет его без изменений. Значения между 0% и 100% линейно влияют на степень эффекта. Начальное значение, используемое для интерполяции, — 0. Значение по умолчанию — 1.

Формальный синтаксис

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )

Примеры

Примеры допустимых значений для grayscale()

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */

grayscale()      /* Completely grayscale */
grayscale(1)
grayscale(100%)

Спецификации

Спецификация
Модуль эффектов фильтров, уровень 1 # funcdef-filter-grayscale

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`grayscale`	18	12	35	15	6	53	35	14	6	6.0	4.4	6

См. также

Другие <filter-function>, которые можно использовать в значениях свойств filter и backdrop-filter:

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/filter-function/grayscale