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

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

Для создания предопределённых эффектов можно использовать несколько функций, например blur() и contrast().

Попробуйте

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

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

.example-container {
  background-color: white;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

Синтаксис

/* <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;

Ссылка на фильтр SVG

С помощью 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()> |
  <saturate()> |
  <sepia()>

<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> ]? )

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

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

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | 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] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

Применение функций фильтра

Свойство 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);
}

<svg
  id="MDN-logo"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 361 104.2"
  xml:space="preserve"
  role="img">
  <title>MDN Web Docs</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"></path>
  <g 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(), а второй — нет.

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

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

См. также

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