---
title: <filter-function>
slug: Web/CSS/filter-function
tags:
  - фильтры
translation_of: Web/CSS/filter-function
---
<div>{{cssref}}</div>

<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>&lt;filter-function&gt;</strong></code> представляет собой графический эффект, который может изменить внешний вид входного изображения. Он используется в свойствах {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<p>Тип данных <code>&lt;filter-function&gt;</code> указывается с использованием одной из функций, указанных ниже. Каждая функция требует аргумент, который, если он неверен, не приводит к применению фильтра.</p>

<dl>
 <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
 <dd>Применяет эффект размытия к изображению.</dd>
 <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
 <dd>Делает изображение ярче или темнее.</dd>
 <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
 <dd>Увеличивает или уменьшает контрастность изображения.</dd>
 <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
 <dd>Применяет к изображению тень.</dd>
 <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
 <dd>Преобразует изображение к тонам серого.</dd>
 <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​</dt>
 <dd>Изменяет оттенок изображения за счёт поворота на цветовом круге.</dd>
 <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
 <dd>Инвертирует цвета изображения.</dd>
 <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
 <dd>Изменяет прозрачность изображения.</dd>
 <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
 <dd>Изменяет насыщенность цветов изображения.</dd>
 <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
 <dd>Преобразует изображение в сепию.</dd>
</dl>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарии</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
   <td>{{ Spec2('Filters 1.0') }}</td>
   <td>Первое определение.</td>
  </tr>
 </tbody>
</table>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Свойства, которые используют этот тип данных: {{cssxref("filter")}} и {{cssxref("backdrop-filter")}}</li>
</ul>