Neon card animation using only HTML and CSS

Taohedul Islam

327

This is a source code of a neon card animation. it's can be an amazing feature of your website, portfolio project or learning stuff. here you can practice this code for learning this stuff it's a great magic of CSS enjoy this.

 <div class="card">
    <h2>CARD</h2>
</div>

Try it Yourself >>

   body {
  background-color: black;
  width: 99vw;
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 190px;
  height: 254px;
  background: #07182E;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.card h2 {
  z-index: 1;
  color: white;
  font-size: 2em;
}

.card::before {
  content: '';
  position: absolute;
  width: 100px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 183, 255)), to(rgb(255, 48, 255)));
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  height: 130%;
  -webkit-animation: rotBGimg 3s linear infinite;
  animation: rotBGimg 3s linear infinite;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

@-webkit-keyframes rotBGimg {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotBGimg {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.card::after {
  content: '';
  position: absolute;
  background: #07182E;
  ;
  inset: 5px;
  border-radius: 15px;
}

Try it Yourself >>