Как размыть картинку CSS

Для размытия картинки в CSS можно использовать свойство filter с значением blur. Значение blur() определяет степень размытия элемента.

Пример:

HTML:

<img src="my-image.jpg" class="blur-image">

CSS:

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

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

Обратите внимание, что свойство filter не поддерживается всеми браузерами. Кроме того, при использовании этого свойства стоит иметь в виду, что это может существенно повлиять на производительность страницы, особенно на мобильных устройствах.

Также можно использовать различные значения для эффекта размытия, например, blur(2px), blur(10px), blur(0.5rem) и т.д.

Надеюсь, эта информация будет полезна!