1. Tutorials
  2. CSS
  3. Layered Text Shadow

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
	;
}