Фильтр

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiple filters */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

При использовании функции используйте следующее:

filter: <filter-function> [<filter-function>]* | none;

Вы можете использовать url() для ссылки на элемент SVG-фильтра. Для ссылки на элемент SVG <filter> используйте следующий синтаксис:

filter: url(file.svg#filter-element-id);

Свойство filter задаётся как none или одна или несколько функций, перечисленных ниже. Если параметр любой функции некорректен, функция возвращает none. За исключением указанных случаев, функции, которые принимают значение, выраженное знаком процента (как в 34%), также принимают значение, выраженное десятичной дробью (как в 0.34).

Когда значения свойства filter содержат несколько функций, фильтры применяются в порядке их указания.

blur()

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

filter: blur(5px);

brightness()

Применяет линейный множитель к входному изображению, делая его более или менее ярким. Значения являются линейными множителями эффекта, где 0% создаёт полностью чёрное изображение, 100% не оказывает никакого влияния, а значения свыше 100% осветляют изображение.

filter: brightness(2);

contrast()

Настраивает контраст входного изображения. Значение 0% делает изображение серым, 100% не оказывает влияния, а значения свыше 100% создают контраст.

filter: contrast(200%);

drop-shadow()

Применяет параметр <shadow> как тень, следующую по контурам изображения. Синтаксис тени похож на <box-shadow> (определён в модуле CSS фонов и границ), за исключением того, что ключевое слово inset и параметр spread не допускаются. Как и все значения свойства filter, любые фильтры после drop-shadow() применяются к тени.

filter: drop-shadow(16px 16px 10px black);

grayscale()

Преобразует изображение в оттенки серого. Значение 100% полностью преобразует изображение в оттенки серого. Начальное значение 0% оставляет входные данные без изменений. Значения от 0% до 100% создают линейные множители эффекта.

filter: grayscale(100%);

hue-rotate()

Применяет поворот оттенка. Значение <angle> определяет количество градусов по кругу цветового оттенка, на которое будут скорректированы входные образцы. Значение 0deg оставляет входные данные без изменений.

filter: hue-rotate(90deg);

invert()

Инвертирует образцы на входном изображении. Значение 100% полностью инвертирует изображение. Значение 0% оставляет входные данные без изменений. Значения между 0% и 100% имеют линейные множители на эффекте.

filter: invert(100%);

opacity()

Применяет прозрачность. 0% делает изображение полностью прозрачным, а 100% оставляет изображение без изменений.

filter: opacity(50%);

saturate()

Насыщает изображение, где 0% является полностью ненасыщенным, 100% оставляет изображение без изменений, а значения свыше 100% увеличивают насыщенность.

filter: saturate(200%);

sepia()

Преобразует изображение в сепию, где значение 100% делает изображение полностью сепией, а 0% не вносит изменений.

filter: sepia(100%);

Вы можете комбинировать любое количество функций для управления отображением. Фильтры применяются в порядке объявления. Следующий пример повышает контрастность и яркость изображения:

filter: contrast(175%) brightness(103%);

При анимации, если у начального и конечного фильтров есть список функций одинаковой длины без <url> в одном и том же порядке, каждая из их функций фильтра интерполируется в соответствии со своими правилами.

Если списки фильтров имеют разную длину, отсутствующие эквивалентные функции фильтра из более длинного списка добавляются в конец более короткого списка. Добавляемые функции используют свои начальные значения без изменения фильтра. Затем все перечисленные фильтры интерполируются в соответствии с конкретными правилами функций фильтра. В противном случае используется дискретная интерполяция.

filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<url> = 
  <url()>  |
  <src()>  

<blur()> = 
  blur( <length>? )  

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

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

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

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

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

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

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

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

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

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Свойство filter применяется ко второму изображению, делая его серым и размытым, а также его границу.

img {
  border: 5px solid yellow;
}
/* Gray the second image by 40% and blur by 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

Функции фильтра применяются в порядке появления. Одну и ту же функцию фильтра можно повторять.

#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

Фильтры применяются в порядке следования. Именно поэтому тени разного цвета: оттенок первой тени изменяется функцией hue-rotate() , а второй — нет.

• Свойство CSS backdrop-filter
• Модуль CSS компоновки и смешивания, включая свойства CSS background-blend-mode и mix-blend-mode.
• Свойство CSS mask
• SVG, включая элемент SVG <filter> и атрибут SVG filter.
• Применение эффектов SVG к содержимому HTML