Эффект размытия CSS: создание размытого фона на веб-странице

СSS-фильтр blur используется для создания размытого эффекта на веб-странице. Этот эффект может придать объемности изображениям или элементам на странице, добавить атмосферности и стиля. Настройка размытия позволяет создавать разные эффекты — от легкого размытия до интенсивного и искаженного образа.

Для применения эффекта blur в CSS используется свойство filter. Это свойство позволяет применить различные фильтры к элементу, включая blur. Для добавления эффекта размытия, необходимо задать значение blur и указать значение радиуса размытия. Чем больше значение радиуса, тем сильнее эффект размытия.

Вот пример CSS-кода для применения эффекта размытия к изображению:

.blur-image {
  filter: blur(5px);
}

В данном примере эффект размытия будет применен к элементу с классом blur-image с радиусом размытия 5 пикселей.

Также можно применять эффект размытия ко всему контенту страницы. Для этого необходимо задать эффект размытия на корневом элементе html или body:

html {
  filter: blur(2px);
}

В этом примере все содержимое страницы будет размыто с радиусом размытия 2 пикселя.

Если требуется более сложный эффект, можно комбинировать разные CSS-фильтры с различными свойствами. Например, можно добавить насыщенный цвет фона и размытие для создания эффекта параллакса:

.parallax-effect {
  background-color: rgba(0, 0, 0, 0.5);
  filter: blur(3px);
}

В данном коде элементу с классом parallax-effect будет добавлен полупрозрачный цвет фона и размытие с радиусом 3 пикселя.

Помимо радиуса размытия, также можно управлять другими параметрами эффекта размытия, такими как яркость и контрастность. Например, можно создать эффект размытия с увеличенной яркостью:

.bright-blur {
  filter: brightness(150%) blur(2px);
}

В этом примере элементу с классом bright-blur будет применен эффект размытия с радиусом 2 пикселя и увеличенной яркостью на 150%.

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