.wrapper{ background: #252854; width: 100%; height:500px; border-radius: 5px; position: relative; } .text{ flex: 0 0 100%; font-size: 14rem; font-weight: 900; color: #00000000; text-align: center; font-family: 'Lato', sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-bottom: 1px solid #d4d7ff; border-top: 1px solid #d4d7ff; background: url(./img/source.gif); background-clip: text; -webkit-background-clip: text; } .text:after{ content: attr(data-text); -webkit-text-stroke: 1.5px #d4d7ff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -49%); background: url(./img/source.gif); background-clip: text; -webkit-background-clip: text; background-size: 43%; }
<div class= "wrapper"> <div class= "text" data-text= "2020">2020</div> <div>