Gradient Border

gradient-border.markdown

Gradient Border

A Pen by devshades on CodePen.

License.

index.html

<div class="animated-border">
  <div class="screen"></div>
</div>

script.js

//Project by @Devshades

style.css

body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.animated-border {
  margin: 50px;
  width: 700px;
  height: 300px;
  border: 10px solid;
  border-image-slice: 1;
  position: relative;
  animation: rotate 4s linear infinite;
  border-image-source: linear-gradient(
    to right, 
    red, 
    orange, 
    yellow, 
    green, 
    blue, 
    indigo, 
    violet
  );
  box-shadow: 0 0 15px 5px red;
}

@keyframes rotate {
  0% {
    border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    box-shadow: 0 0 150px 5px red;
  }
  14% {
    border-image-source: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
    box-shadow: 0 0 150px 5px orange;
  }
  28% {
    border-image-source: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
    box-shadow: 0 0 150px 5px yellow;
  }
  42% {
    border-image-source: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
    box-shadow: 0 0 150px 5px green;
  }
  57% {
    border-image-source: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
    box-shadow: 0 0 150px 5px blue;
  }
  71% {
    border-image-source: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
    box-shadow: 0 0 150px 5px indigo;
  }
  85% {
    border-image-source: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
    box-shadow: 0 0 150px 5px violet;
  }
  100% {
    border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    box-shadow: 0 0 150px 5px red;
  }
}
.screen {
  height: 100%;
  width: 100%;
  background-image: url("https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNzN1dTdpamRubmFzcjFiYnZiZ3UxOGRnNzdxZXM0Mmpyd2RxZ3c2cSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/oMdZb5rnyCchjKWtpP/giphy.gif");
  background-size: 100% auto;
}