CSS свойство `filter`

Определение и применение

CSS свойство filter устанавливает визуальный эффект (фильтр) для элемента (например, размытие или изменение цвета). Фильтр обрабатывает элемент целиком: его фон, рамку, текст и содержимое потомков.

Больше примеров доступно в генераторе CSS-фильтров, вы сможете подобрать сочетание необходимых эффектов, загрузить своё изображение и при необходимости скопировать готовый CSS.

Попробуйте значения filter

Фильтр применяется к отрисованному элементу целиком: фону, рамке и тексту. Сравните изменение цвета и размытие.

HTML и CSS примера

HTML

<div class="demo-target">
  <span class="sun" aria-hidden="true"></span><strong>Цветная карточка</strong>
</div>

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: linear-gradient(135deg, #245a85, #337b68);
  color: white;
  filter: none;
}
.sun {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffcb69;
  margin-bottom: 12px;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: linear-gradient(135deg, #245a85, #337b68);
  color: white;
  filter: grayscale(1);
}
.sun {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffcb69;
  margin-bottom: 12px;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: linear-gradient(135deg, #245a85, #337b68);
  color: white;
  filter: sepia(1);
}
.sun {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffcb69;
  margin-bottom: 12px;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: linear-gradient(135deg, #245a85, #337b68);
  color: white;
  filter: blur(3px);
}
.sun {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffcb69;
  margin-bottom: 12px;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: linear-gradient(135deg, #245a85, #337b68);
  color: white;
  filter: brightness(1.5);
}
.sun {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffcb69;
  margin-bottom: 12px;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: linear-gradient(135deg, #245a85, #337b68);
  color: white;
  filter: hue-rotate(90deg);
}
.sun {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffcb69;
  margin-bottom: 12px;
}

Поддержка браузерами

Спецификация: filter-effects

Поддерживается во всех основных браузерах с 2017 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.filter
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`filter`	✓53	✓12	✓35	✓40	✓9.1	✓53	✓35	✓41	✓9.3	✓6.0	✓53	✓9.3
`blur`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`brightness`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`contrast`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`drop-shadow`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`grayscale`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`hue-rotate`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`invert`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`none`	✓18	✓12	✓35	✓15	✓6	✓18	✓35	✓14	✓6	✓1.0	✓4.4	✓6
`opacity`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`saturate`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
`sepia`	✓18	✓12	✓35	✓40	✓6	✓53	✓35	✓41	✓6	✓6.0	✓4.4	✓6
On SVG elements	✓89	✓89	✓35	✓75	×	✓89	✓35	✓63	×	✓15.0	✓89	×
Ещё 11 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

/* Без эффектов */
filter: none;

/* Размытие и тень */
filter: blur() | drop-shadow();

/* Яркость, контраст и прозрачность */
filter: brightness() | contrast() | opacity();

/* Цвет */
filter: grayscale() | hue-rotate() | invert() | saturate() | sepia();

/* Ссылка на SVG-фильтр */
filter: url();

/* Цепочка из одной или нескольких функций через пробел */
filter: [ <filter-function> | url() ]+;

/* Глобальные значения */
filter: initial | inherit | unset | revert | revert-layer;

Знак | разделяет варианты, квадратные скобки группируют их, а + означает одно или несколько повторений. <filter-function> — любая из перечисленных функций. Функции применяются слева направо. Например, допустимо filter: blur(4px) brightness(150%) url(#duotone).

JavaScript синтаксис:

JavaScript

element.style.filter = "blur(4px)";

Начальное значение свойства

none.

Значения свойства

Функции яркости, контрастности, насыщенности, оттенков серого, инверсии, непрозрачности и сепии принимают неотрицательное число или процент: 0.5 равно 50%, 1 — 100%. Для grayscale(), invert(), opacity() и sepia() значения выше 1 допустимы, но эффект ограничивается уровнем 1.

Значения filter и параметры функций
Значение	Описание
`none`	Эффекты отсутствуют. Начальное значение.
`blur()`	Гауссово размытие. Принимает неотрицательную длину, например `4px` или `0.2rem`; проценты недопустимы. Чем больше значение, тем сильнее размытие. Без аргумента используется `0`.
`brightness()`	Яркость: `0` — чёрный результат, `1` (100%) — без изменений, больше `1` — светлее. Без аргумента используется `1`.
`contrast()`	Контрастность: `0` — серый результат, `1` — без изменений, больше `1` — выше контраст. Без аргумента используется `1`.
`drop-shadow()`	Тень по непрозрачному контуру содержимого. Две обязательные длины задают смещение по горизонтали и вертикали; они могут быть отрицательными. Третья, необязательная неотрицательная длина задаёт стандартное отклонение гауссова размытия (по умолчанию `0`). Это не тот же параметр, что радиус размытия у `box-shadow`. Цвет необязателен, без него используется `currentColor` — значение свойства `color`. Пример: `drop-shadow(8px 8px 4px #496b91)`. Параметр растяжения `spread` и ключевое слово `inset` не поддерживаются. Можно последовательно указать несколько `drop-shadow()`; каждый следующий обрабатывает результат предыдущего, включая уже созданные тени.
`hue-rotate()`	Поворот оттенка. Принимает угол в `deg`, `rad`, `grad` или `turn`. Допустимы отрицательные значения и несколько оборотов: `450deg` даёт тот же эффект, что `90deg`. Без аргумента используется `0deg`. Это преобразование RGB-цветов, а не точная замена оттенка в HSL: насыщенность и светлота могут измениться.
`grayscale()`	Оттенки серого: `0` сохраняет цвета, `1` полностью обесцвечивает. Без аргумента используется `1`.
`invert()`	Инверсия цветов: `0` — без изменений, `1` — полная инверсия, `0.5` — серый результат. Без аргумента используется `1`.
`opacity()`	Непрозрачность: `0` — полностью прозрачно, `1` — без изменений. Без аргумента используется `1`. В отличие от отдельного свойства `opacity`, функция может менять прозрачность промежуточного результата в цепочке фильтров. При совместном использовании оба эффекта учитываются.
`saturate()`	Насыщенность: `0` убирает цвета, `1` сохраняет их, больше `1` усиливает насыщенность. Без аргумента используется `1`.
`sepia()`	Оттенки сепии: `0` — без изменений, `1` — полный эффект в коричневых тонах. Без аргумента используется `1`.
`url()`	Ссылка на SVG-элемент `<filter>` по его `id`: `url(#filter-id)` для SVG внутри страницы или `url("filters.svg#filter-id")` для внешнего файла. Доступ к внешнему ресурсу зависит от ограничений безопасности браузера.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `filter` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Особенности применения

Свойство не наследуется, но потомки входят в общий отрисованный результат родителя. Поэтому filter: none у ребёнка не отменяет размытие, заданное родителю.
Эффекты не меняют размеры и положение блоков в раскладке. Размытие и тень могут выходить за границы, а overflow со значением hidden или clip у предка обрезает их.
Невалидный параметр делает невалидным всё объявление. Например, filter: blur(-2px) brightness(150%) игнорируется целиком; может сработать другое объявление из каскада.
Аппаратное ускорение зависит от браузера, устройства и эффекта. Большая область размытия и длинная цепочка фильтров могут быть затратными; проверяйте анимацию на целевых устройствах.

Порядок фильтров и анимация

Функции выполняются слева направо, поэтому перестановка может менять результат. Сравните invert(100%) sepia(100%) и sepia(100%) invert(100%) в любом примере ниже. Последующее объявление filter заменяет весь список функций.

CSS

.image {
  filter: grayscale(100%);
  transition: filter 300ms;
}
.image:hover {
  filter: grayscale(0%);
}
@media (prefers-reduced-motion: reduce) {
  .image { transition: none; }
}

Для плавного перехода используйте одинаковый порядок функций в обоих состояниях. SVG-фильтры через url() не интерполируются как числовые параметры функций. Свойство filter меняет сам элемент; для эффекта над фоном позади него используется backdrop-filter.

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

Filter Effects Module Level 1.

Наследуется

Нет.

Анимируемое

Да. Списки с одинаковыми функциями в том же порядке интерполируются по параметрам; если один список короче, недостающие функции дополняются нейтральными значениями. Если списки нельзя сопоставить, например при url(), значение переключается дискретно.

Примеры, попробуйте сами

Откройте редактор примера и измените значение свойства filter, результат обновляется автоматически. Рядом показан оригинал или другой вариант эффекта для сравнения.

Размытие (функция blur):

Поменяйте радиус с 4px на 0 или 8px. Отрицательные длины и проценты недопустимы.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/vegas.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/vegas.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: blur(4px);
}

Яркость (функция brightness):

100% сохраняет яркость, 0% делает изображение чёрным. Попробуйте 50% и 150%.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/catlamp.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/catlamp.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: brightness(150%);
}

Контраст (функция contrast):

100% сохраняет контраст, 0% даёт серое изображение. Попробуйте 50% и 180%.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/lis.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/lis.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: contrast(180%);
}

Поворот оттенка (функция hue-rotate):

Попробуйте 90deg, -90deg и 450deg. Угол не ограничен одним оборотом; 450deg даёт тот же эффект, что 90deg.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/leto.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/leto.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: hue-rotate(90deg);
}

Оттенки серого (функция grayscale):

0% сохраняет цвета, 100% убирает их. Попробуйте промежуточное значение 50%.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/zhiraf.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/zhiraf.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

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

Инверсия (функция invert):

0% сохраняет цвета, 100% инвертирует их, а 50% даёт серый результат.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/invert.png" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/invert.png" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: invert(100%);
}

Прозрачность (функция opacity):

100% сохраняет непрозрачность, 0% скрывает изображение. Фон под изображением помогает увидеть эффект.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/hameleon.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/hameleon.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: opacity(50%);
}

Насыщенность (функция saturate):

100% сохраняет цвета, 0% убирает насыщенность. Значения выше 100% усиливают её.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/kot_pid.jpeg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/kot_pid.jpeg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: saturate(200%);
}

Сепия (функция sepia):

0% сохраняет исходное изображение, 100% полностью переводит его в оттенки сепии.

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
img {
    display: block;
    width: 100%;
    height: min(260px, calc(100vh - 80px));
    object-fit: contain;
}
@media (max-width: 420px) {
    img {
        height: calc(50vh - 64px);
    }
    .comparison {
        grid-template-columns: 1fr;
    }
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <img src="assets/dog_pid.jpg" alt="Исходное изображение" />
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <img class="filtered" src="assets/dog_pid.jpg" alt="Изображение с фильтром" />
  </figure>
</div>

style.css

CSS

.filtered {
    filter: sepia(100%);
}

Тень по контуру (функция drop-shadow):

Сравните тень прямоугольного блока и тень звезды. В отличие от box-shadow, фильтр учитывает прозрачные области. Несколько теней можно задать последовательностью функций drop-shadow().

base.css

CSS

body {
    margin: 0;
    padding: 16px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 8px;
}
@media (max-width: 420px) {
    .comparison {
        grid-template-columns: 1fr;
    }
}
.symbol {
    width: min(160px, 100%);
    text-align: center;
    font: min(140px, calc(50vh - 100px))/1.2 system-ui;
    color: #e67b20;
}
.box {
    box-shadow: 8px 8px 4px #496b91;
}

index.html

HTML

<div class="comparison">
  <figure>
    <figcaption>box-shadow: прямоугольная рамка</figcaption>
    <div class="symbol box">★</div>
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <div class="symbol filtered">★</div>
  </figure>
</div>

style.css

CSS

.filtered {
    filter: drop-shadow(8px 8px 4px #496b91);
}

Свой SVG-фильтр (функция url):

Фильтр объявлен в SVG внутри примера. Значение url(#duotone) ссылается на его ID. Во вкладке HTML измените values="0" на values="1", чтобы вернуть насыщенность.

base.css

CSS

body {
    margin: 0;
    padding: 24px;
    font: 16px/1.5 system-ui;
    color: #203047;
    background: #eef3f8;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
figure {
    margin: 0;
    min-width: 0;
}
figcaption {
    margin-bottom: 12px;
}
img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
}
@media (max-width: 420px) {
    .comparison {
        grid-template-columns: 1fr;
    }
}
.card {
    padding: 32px;
    background: linear-gradient(135deg, #ffb454, #3f8cb5);
    color: #17334d;
    border: 4px solid #de5b51;
}

index.html

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true">
  <filter id="duotone" color-interpolation-filters="sRGB">
    <feColorMatrix type="saturate" values="0" />
  </filter>
</svg>
<div class="comparison">
  <figure>
    <figcaption>Оригинал</figcaption>
    <div class="card">Цветная карточка</div>
  </figure>
  <figure>
    <figcaption>Результат</figcaption>
    <div class="card filtered">Цветная карточка</div>
  </figure>
</div>

style.css

CSS

.filtered {
    filter: url(#duotone);
}

CSS свойство filter

Определение и применение

Попробуйте значения filter

Поддержка браузерами

Начальное значение свойства

Значения свойства

Особенности применения

Порядок фильтров и анимация

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

Наследуется

Анимируемое

Примеры, попробуйте сами

Размытие (функция blur):

Яркость (функция brightness):

Контраст (функция contrast):

Поворот оттенка (функция hue-rotate):

Оттенки серого (функция grayscale):

Инверсия (функция invert):

Прозрачность (функция opacity):

Насыщенность (функция saturate):

Сепия (функция sepia):

Тень по контуру (функция drop-shadow):

Свой SVG-фильтр (функция url):

CSS свойство `filter`