Eu vi esse modelo de texto e achei bem legal, ai tentei replicar e não deu muito certo... Na verdade eu até consegui colocar um gradiente que me agrada dentro do texto, mas não consegui fazer esse efeito de sombreamento colorida no fundo.
Eu tentei usar text-shadow: 0 0 40px red;
no texto, mas quando faço isso o shadow
fica por cima do texto! Além disso ele fica de uma cor só. Repare que na imagem de referência essa sombra é multi-colorida.
Como posso contornar esse problema e conseguir uma sombra multicolorida como a da imagem? Como consigo esse gradiente no fundo do texto?
Segue o código com o que eu tenho até o momento.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgb(31, 32, 34);
}
h1 {
font-family: sans-serif;
text-align: center;
font-size: 20vw;
width: 100%;
margin: auto;
position: relative;
z-index: 2;
}
span {
color: transparent;
background-image: radial-gradient(#0ff 0%, #0f0 25%, #ff0 50%, #f0f, #00f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 115% 80%;
background-position: top left;
}
span.x {
text-shadow: 0 0 40px red;
}
<h1><span>2018</span></h1>
<h1><span class="x">2018</span></h1>