<div class="box">
<span data-text-shadow="5000">5000</span>$ ,
<span data-text-shadow="10000">10000</span>$ ,
<span data-text-shadow="20000">20000</span>$
</div>
body {
box-sizing: border-box;
margin: 0;
padding: 20px;
background-color: #eee;
font-family: Tahoma;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-wrap: wrap;
min-height: 100vh;
overflow-x: hidden;
color: #14185c;
font-size: 40px;
font-weight: bold;
}
[data-text-shadow] {
display: inline-block;
position: relative;
z-index: 0;
margin: 0 10px;
}
[data-text-shadow]:after {
content: attr(data-text-shadow);
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -75%);
font-size: 50px;
z-index: -5;
opacity: 0.1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.