Layered Text Shadow

In this tutorial, you will learn how to add multiple layers of text shadow with CSS. Watch the video below for a detailed tutorial.

HTML

<body>
	<h1>Winterwind</h1>
</body>

CSS

@import  url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

body {
	background-color: #2E3537;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

h1 {
	font-family: 'Lobster', cursive;
	color: #E5F3FA;
	font-size: 7rem;
	text-shadow: 
		0 0 1px #0B3A6B,
		5px 5px 0px #89CFF1,
		10px 10px 0px #6EB1D6,
		15px 15px 0px #5293BB,
		20px 20px 0px #3776A1,
		25px 25px 0px #1C5886,
		30px 30px 0px #0B3A6B
	;
}