Функция CSS `blur()`

blur() CSS-функция применяет размытие по Гауссу к входному изображению. Результатом является <filter-function>.

Попробуйте

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

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

Синтаксис

blur()         /* No effect */
blur(0)        /* No effect */

blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

Параметры

<length> Необязательный

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

SVG-фильтр

Для размытия содержимого также можно использовать элемент фильтра SVG <feGaussianBlur>. Атрибут stdDeviation фильтра принимает до двух значений, что позволяет создавать более сложные варианты размытия. Чтобы создать эквивалентное размытие, указываем одно значение для stdDeviation. Затем на этот эффект SVG можно сослаться по ID:

<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

Следующие объявления дают одинаковый эффект:

filter: blur(1.1px);
filter: url("#blur11"); /* with embedded SVG */
filter: url("folder/fileName.svg#blur11"); /* external svg filter definition */

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

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

Примеры

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

.filter {
  filter: blur(3.5px);
}

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url('#blur')" />
</svg>

svg:not([height]) {
  display: none;
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th>Live example</th>
      <th>SVG Equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgBlur">
            <feGaussianBlur stdDeviation="3.5" />
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgBlur')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

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

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

См. также

• Модуль эффектов фильтров CSS
• Другие функции <filter-function>, доступные для использования в значениях свойств filter и backdrop-filter:
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()