JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ex-1">Образец</div>
<div class="ex-2" data-text="Образец">Образец</div>
CSS
.ex-1{
font-size: 42px;
font-weight: bold;
background: linear-gradient(gold, red);
-webkit-background-clip: text;
color: transparent;
}
.ex-2 {
margin-bottom:10px;
font-size:42px;
font-weight:bold;
position: relative;
text-shadow: 0 0 1px #C45718, 0 0 1px #C45718, 0 0 1px #C45718, 0 0 15px goldenrod, 0 0 15px goldenrod;
}
.ex-2:after{
content: attr(data-text);
display: block;
font-family: inherit;
font-size: inherit;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
background: linear-gradient(yellow, goldenrod);
-webkit-background-clip: text;
color: transparent;
text-shadow: none;
}