Как создать размытые текстовые эффекты в CSS [дублировать] ⇐ CSS

[Anonymous]

Я хочу достичь текстового эффекта, показанного на изображении ниже, в частности, внешний вид времени. class = "Snippet">

Код: Выделить всё

.image-container {
position: relative;
display: inline-block;
}

.text-overlay {
position: absolute;
top: 50%;
left: 50%;

font-size: 10rem;
font-weight: bold;

-webkit-text-fill-color: rgba(221, 221, 221, 0.935);
filter: blur(2px);
}< /code>

[img]https://media.timeout.com/images/103444978/image.jpg[/img]

Test

< /code>
< /div>
< /div>
< /p>
Попытка 2: Произошли некоторые ошибки (я подозреваю из-за контекста укладки), не позволяя его правильно подключить. Lang-CSS PrettyPrint-Override ">.image-container {
position: relative;
display: inline-block;
}

.text-overlay {
position: absolute;
top: 50%;
left: 50%;

font-size: 10rem;
font-weight: bold;

color: transparent;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
background-clip: text;
}< /code>

[img]https://media.timeout.com/images/103444978/image.jpg[/img]

Test

Я искренне запрашиваю, если кто -нибудь может сказать мне решение.

Подробнее здесь: https://stackoverflow.com/questions/796 ... cts-in-css