Функция CSS blur()

Определение и использование

Функция CSS blur() Функция фильтра применяет эффект размытия к элементам. Чем больше значение, тем сильнее эффект размытия.

Если значение не указано, то используется значение по умолчанию 0.

Пример

Пример 1

Применение различных эффектов размытия к элементам <h1> и <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Попробуйте сами

Пример 2

Создание размытого фона:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Попробуйте сами

Грамматика CSS

blur(radius)

Технические детали

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Соответствующие страницы

См. также:Свойство filter в CSS

См. также:Функция brightness() CSS

См. также:Функция CSS contrast()

См. также:Функция CSS drop-shadow()

См. также:Функция CSS grayscale()

См. также:Функция CSS hue-rotate()

См. также:Функция CSS invert()

См. также:Функция CSS opacity()

См. также:Функция saturate() CSS

См. также:Функция sepia() CSS