What does this CSS snippet do?

This CSS code creates a neon text effect by combining specific styles for layout, font, color, and most importantly, multiple layers of glowing text-shadow.

HTML

<div class="demo-bg">
 <div class="demo-text">Worry serves no useful purpose</div>
</div>

CSS

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

.demo-bg {
  padding: 4em 2em;
  background-color: #000;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  text-transform: uppercase;
  }

.demo-text {
  margin: 0 auto;
  max-width: 400px;
  color: #fff;
  font-family: 'Tilt Neon', cursive;
  font-size: 4rem;
  line-height: 1em;
  text-shadow:
  0 0 10px #fff,
  0 0 20px #fff,
  0 0 30px #fff,
  0 0 40px #0fa,
  0 0 80px #0fa;
  }

HTML and CSS

Neon text

What does this CSS snippet do?

About the author