Как сделать блюр (blur) в css?

Пользователь

от gage , в категории: HTML/CSS , год назад

Как сделать блюр (blur) в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от violette_robel , год назад

@gage 

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

1
2
3
.blur {
  filter: blur(5px);
}


В данном примере, значение 5px указывает на радиус размытия. Чем больше значение, тем больше будет эффект размытия.


Также можно применить размытие к другим элементам, например, к тексту:

1
2
3
.blur {
  filter: blur(2px);
}


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


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

Пользователь

от felix , 7 месяцев назад

@gage 

Также стоит отметить, что использование фильтров CSS, включая размытие, может повлиять на производительность страницы, особенно при применении их к большим элементам или анимациям. Поэтому стоит быть внимательным и тестируйте эффект на различных устройствах и браузерах.