Как сделать такой блок на CSS?

Question

[freys]

Comments

[Ankhena]

Что именно у вас не получилось?
И покажите, что вы уже сделали на codepen.io

[Сергей delphinpro]

Раскладка флексами, картинка background-image, блок с цифрой 10 background-color: rgba(), text-shadow для белого текста, border-radius для закругленных углов, иконка svg.

[freys]

Ankhena, хотел бы узнать как сделать размытие позади цифры

[freys]

Сергей delphinpro, хотел бы узнать как сделать размытие позади цифры
. спасибо

[Вадим]

freys, backdrop-filter: blur(5px) (не везде поддерживается)
Иначе только если вся фоновая картинка будет не фоновой, а через свг. И тогда через свг фильтры.
Например вот: https://codepen.io/dunakin/pen/WNPdze
Гуглится по теме: svg filter blur или svg filter glass

[Сергей delphinpro]

Вадим, да там больше на text-shadow похоже с большим блюром.

[Вадим]

Сергей delphinpro, а, хм, а я так понял что там картинка огня тоже размывается и вопрос про это

[Сергей delphinpro]

Вадим, ну да, может быть. мелко, плохо видно. если да, то backgdrop-filter вполне подойдет. поддержка 95% уже https://caniuse.com/css-backdrop-filter

[Вадим]

Сергей delphinpro, а, ну да, лиса смотрю подтянулась

[Ankhena]

Мне тоже кажется, что это скорее светлый text-shadow.

Если макет в фигме, то можно посмотреть, что имел в виду дизайнер.

Answer 1

[Noder SS]

как я понял, надо размытие под цифрой, это backdrop-filter https://developer.mozilla.org/en-US/docs/Web/CSS/b...