1. Tutorials
  2. CSS
  3. Backlight Animation

Backlight Animation

In this tutorial, you will learn how to add a backlight effect animation with CSS. Watch the video below for a detailed tutorial.

HTML

<div class="backlight">
	<h1>Winterwind Inc.</h1>
</div>

CSS

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

.backlight {
  position: relative;
  background-color: #19637A;
  width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

.backlight h1 {
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
}

.backlight::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: scale(0.9);
  filter: blur(30px);
  background: linear-gradient(90deg, #8AF1D7, #128EC8);
  background-size: 200%;
  animation: backlight 10s ease infinite;
}

@keyframes  backlight {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}