filter

Властивість CSS filter (фільтр) застосовує до елемента графічні ефекти, як-от розмиття чи зсув кольору. Фільтри зазвичай використовуються для налаштування відображення звичайних та фонових зображень і меж.

Кілька функцій, як-от blur() та contrast(), дозволяють досягнути наперед визначених ефектів.

Спробуйте його в дії

Синтаксис

/* Значення <filter-function> */
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");

/* Декілька фільтрів */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Фільтр не використовується */
filter: none;

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

Для застосування функції пишіть так:

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

Щоб скористатися фільтровим елементом SVG, застосуйте url(). Використовується наступний синтаксис:

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() в однаковому порядку, кожна функція буде інтерпольована відповідно до її специфічних правил.

Якщо списки фільтрів мають різну довжину, відсутні функції з довшого списку додаються до кінця коротшого, використовуючи початкові значення без змін. Потім всі фільтри інтерполюються згідно з правилами функцій. В іншому випадку застосовується дискретна інтерполяція.

Формальне визначення

Початкове значення	`none`
Успадковується	ні
Обчислене значення	as specified

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

none | <filter-function-list>де 
<filter-function-list> = [ <filter-function> | <url> ]+
де 
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>
де 
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )
де 
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
де 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
де 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

Застосування функцій фільтра

Властивість filter застосовується до другого зображення, яке разом зі своєю межею стає сірим і розмитим.

img {
  border: 5px solid yellow;
}
/* Робить друге зображення сірим на 40% і розмитим на 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

<img src="pencil.jpg" alt="Оригінальне зображення різке" />
<img src="pencil.jpg" alt="Зображення та межа розмиті й приглушені" />

Повторення функцій фільтра

Функції фільтра застосовуються у порядку їх появи. Ту саму функцію фільтра можна повторювати.

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

<svg
  id="MDN-logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 361 104.2"
  xml:space="preserve"
  role="img">
  <title>Вебдокументація MDN</title>
  <path
    d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z"
    style="fill: var(--text-primary);"></path>
  <g style="fill:blue;">
    <path
      d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path>
  </g>
</svg>

Фільтри застосовуються по черзі. Саме тому тіні різних кольорів: відтінок першої тіні змінюється функцією hue-rotate(), а друга тінь залишається без змін.

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

Специфікація
Filter Effects Module Level 2 (Filter Effects 2) # FilterProperty

Сумісність із браузерами

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`filter`	Chrome Full support 53	Edge Full support 12	Firefox Full support 35	Internet Explorer No support Ні footnote	Opera Full support 40	Safari Full support 9.1	WebView Android Full support 53	Chrome Android Full support 53	Firefox for Android Full support 35	Opera Android Full support 41	Safari on iOS Full support 9.3	Samsung Internet Full support 6.0
On SVG elements	Chrome No support Ні	Edge No support Ні	Firefox Full support 35	Internet Explorer No support Ні	Opera No support Ні	Safari No support Ні	WebView Android No support Ні	Chrome Android No support Ні	Firefox for Android Full support 35	Opera Android No support Ні	Safari on iOS No support Ні	Samsung Internet No support Ні

Дивіться також

backdrop-filter
mask
Атрибут SVG filter
Модуль композиції та змішування CSS, який містить властивості background-blend-mode і mix-blend-mode.
SVG, включно з елементом <filter> та атрибутом filter.
Застосування ефектів SVG до вмісту HTML

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.