Cara Membuat Efek text-shadow Berlapis dengan CSS

Cara membuat efek text-shadow berlapis dengan CSS, ini dibuat oleh ShireeenTaj.

Di sini terlihat sebuah teks yang dibuat bayangan menggunakan CSS pada properti text-shadow dengan variasi warna yang berbeda.

Koding HTML

Silahkan Anda masukkan koding HTML di bawah ini:

<div>Roses</div>
<p>Heavily inspired from
    <a href="https://unblast.com/free-rose-text-effect-psd/">unblast.com</a>
</p>

Koding CSS

Selanjutnya masukkan koding CSS seperti ini:

div{
		  font-size: 15rem;
	    text-align: center;
      height:90vh;
      line-height: 90vh;
	    color: #fcedd8;
	    background: #d52e3f;
	   	font-family: 'Niconne', cursive;
	    font-weight: 700;
      text-shadow: 5px 5px 0px #eb452b, 
                  10px 10px 0px #efa032, 
                  15px 15px 0px #46b59b, 
                  20px 20px 0px #017e7f, 
                  25px 25px 0px #052939, 
                  30px 30px 0px #c11a2b, 
                  35px 35px 0px #c11a2b, 
                  40px 40px 0px #c11a2b, 
                  45px 45px 0px #c11a2b;
}

p{
    text-align: center;
    font-family: "Helvetica";
    font-size:0.8rem;
}

a{
    color: #d52e3f;
    text-decoration: none;
    font-family: 'Niconne', cursive;
    font-size: 1.2rem;

}

Tampilan akhir akan menjadi seperti ini: