Отличное и элегантное решение с использованием backdrop-filter! Это действительно самый современный и производительный способ добиться такого эффекта, отказавшись от лишних PNG.
Хотел бы добавить пару советов для улучшения результата:
1. Контрастность: Чтобы текст внутри карточки всегда читался, можно обернуть содержимое в отдельный блок и задать ему background: rgba(255, 255, 255, 0.1); с тем же border-radius. Это создаст необходимый контраст с фоновым блюром.
2. Производительность: Для плавной анимации и во избежание подтормаживаний на слабых устройствах лучше применять размытие к фону, а не к самой карточке.