Как сделать блюр css?

Теперь ясно, нужен backdrop-filter, а не обычный filter.

Для карточки с четким текстом и размытым фоном попробуйте:

.glass { background: rgb(255 255 255 / 65%); backdrop-filter: blur(8px); }

Карточка должна располагаться поверх содержимого, которое заметно через ее полупрозрачную заливку. Backdrop-filter обрабатывает область позади элемента, поэтому текст самой карточки не требуется размывать. Если за ней однотонный фон, визуальная разница может быть почти незаметной: у размытия просто мало деталей для изменения.

Filter действует по-другому. Запись filter: blur(8px) на общей карточке размывает результат рисования этой карточки, включая ее текст и другие потомки. Поэтому попытка компенсировать это более резким шрифтом у дочернего элемента не решает исходную проблему. Если нужен размытый снимок с надписью поверх, разместите снимок отдельным слоем и примените filter только к нему.

Следите за краями. Размытие распространяет изображение за исходную четкую границу, и контейнер с обрезкой может заметно срезать этот эффект. Иногда нужно предусмотреть дополнительную область изображения или подходящее скрытие переполнения, но это зависит от композиции. Не меняйте overflow у всей страницы ради одного декоративного слоя.

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