Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- By Lorenzo Satta Chiris -->

<h2 class="titles">Background animations</h2>
<h3 class="titles" id="smallTitle">Gradient backgrounds</h3>
<div class="bigContainer">
  <div class="container" id="container1">
    1
  </div>
  <div class="container" id="container2">
    2
  </div>
  <div class="container" id="container3">
    3
  </div>
  <div class="container" id="container4">
    4
  </div>
</div>

<hr>

<div class="bigContainer">
  <div class="container" id="container5">
    5
  </div>
  <div class="container" id="container6">
    6
  </div>
  <div class="container" id="container7">
    7
  </div>
  <div class="container" id="container8">
    8
  </div>
</div>

<hr>

<div class="bigContainer">
  <div class="container" id="container9">
    9
  </div>
  <div class="container" id="container10">
    10
  </div>
  <div class="container" id="container11">
    11
  </div>
  <div class="container" id="container12">
    12
  </div>
</div>

<h3 class="titles" id="smallTitle">Rotating Background</h3>
<div class="bigContainer">
  <div class="container" id="container13">
    13
  </div>
  <div class="container" id="container14">
    14
  </div>
  <div class="container" id="container15">
    15
  </div>
  <div class="container" id="container16">
    16
  </div>
</div>

<hr>

<h2 class="titles">Border animations</h2>
<h3 class="titles" id="smallTitle">Border Slow animations</h3>
<div class="bigContainer">
  <div class="containerB" id="containerB1">
    B1
  </div>
  <div class="containerB" id="containerB2">
    B2
  </div>
  <div class="containerB" id="containerB3">
    B3
  </div>
  <div class="containerB" id="containerB4">
    B4
  </div>
</div>

<hr>

<h3 class="titles" id="smallTitle">Quick animations</h3>
<div class="bigContainer">
  <div class="containerB" id="containerB5">
    B5
  </div>
  <div class="containerB" id="containerB6">
    B6
  </div>
  <div class="containerB" id="containerB7">
    B7
  </div>
  <div class="containerB" id="containerB8">
    B8
  </div>
</div>

<hr>

<div class="bigContainer">
  <div class="containerB" id="containerB9">
    B9
  </div>
  <div class="containerB" id="containerB10">
    B10
  </div>
  <div class="containerB" id="containerB11">
    B11
  </div>
  <div class="containerB" id="containerB12">
    B12
  </div>
</div>

<hr>

<h3 class="titles" id="smallTitle">Rotating Borders</h3>

<div class="containerBRotating">
  <div class="circle-wrapper">
    <div class="success circle"></div>
    <div class="icon">B13
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper2">
    <div class="success2 circle2"></div>
    <div class="icon2">B14
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper3">
    <div class="success3 circle3">B15</div>
    <div class="icon3">
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper4">
    <div class="success4 circle4">B16</div>
    <div class="icon4">
    </div>
  </div>
</div>

<div class="containerBRotating">
  <div class="circle-wrapper5">
    <div class="success5 circle5"></div>
    <div class="icon5">B17
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper6">
    <div class="success6 circle6"></div>
    <div class="icon6">B18
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper7">
    <div class="success7 circle7">B19</div>
    <div class="icon7">
    </div>
  </div>

  <hr class="hr">

  <div class="circle-wrapper8">
    <div class="success8 circle8">B20</div>
    <div class="icon8">
    </div>
  </div>
</div>

<div class="info">
  <a href="https://codepen.io/DevLorenzo" target="_blank" class="info1">My profile page</a>
  <a href="https://codepen.io/DevLorenzo/pen/LYRJbVw" target="_blank" class="info2">My most visited Pen</a>
  <a href="https://www.codegrepper.com/app/profile.php?id=182534" target="_blank" class="info3">Grepper profile</a>
</div>
              
            
!

CSS

              
                // By Lorenzo Satta Chiris

/* Find quickly an animation with ctrl + f. Search for container + number of the animation you search / For border containers add a B (containerB1) */

@import url("https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,600;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap");

/* Find here a cool list of gradient animated effects (with no JS)*/

/* First Row - Direction -45deg - 4 colors palette */

#container1 {
  /*Cool marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange0 15s ease infinite;
}

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

#container2 {
  /* fire gradient: red, yellow, orang, red again  */
  color: white;
  background: linear-gradient(
    -45deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
  animation: backgroundChange1 10s ease infinite;
}

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

#container3 {
  /*Green gradient: Violet, green, yellow, aqua*/
  background: linear-gradient(
    -45deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
  animation: backgroundChange2 7s ease-in infinite;
}

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

#container4 {
  /* Serious gradient: Black and grey*/
  color: whitesmoke;
  background: linear-gradient(
    -45deg,
    #121212,
    #383836,
    #2c3e54,
    #316e83,
    #468590,
    #a8b4b2,
    #a4a4a4,
    #b3bf86
  );
  background-size: 400% 400%;
  animation: backgroundChange3 15s ease infinite;
}

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

/* Second Row - Direction -90deg - 4 colors palette */

#container5 {
  /*Cool marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    -90deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange4 15s ease infinite;
}

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

#container6 {
  /* fire gradient: red, yellow, orang, red again  */
  color: white;
  background: linear-gradient(
    -90deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
  animation: backgroundChange5 10s ease infinite;
}

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

#container7 {
  /*Green gradient: Violet, green, yellow, aqua*/
  background: linear-gradient(
    -90deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
  animation: backgroundChange6 7s ease-in infinite;
}

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

#container8 {
  /* Serious gradient: Black*/
  color: whitesmoke;
  background: linear-gradient(
    -90deg,
    #121212,
    #383836,
    #2c3e54,
    #316e83,
    #468590,
    #a8b4b2,
    #a4a4a4,
    #b3bf86
  );
  background-size: 400% 400%;
  animation: backgroundChange7 15s ease infinite;
}

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

/* Third Row - Direction -90deg - 4 colors palette */

#container9 {
  /*Cool marine gradient: Grey, blue, violet, grey again */
  background: linear-gradient(
    45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange8 15s ease infinite;
}

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

#container10 {
  /* fire gradient: red, yellow, orang, red again  */
  color: white;
  background: linear-gradient(
    45deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
  animation: backgroundChange9 10s ease infinite;
}

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

#container11 {
  /*Green gradient: Violet, green, yellow, aqua*/
  background: linear-gradient(
    45deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
  animation: backgroundChange10 7s ease infinite;
}

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

#container12 {
  /* Serious gradient: Black*/
  color: whitesmoke;
  background: linear-gradient(
    45deg,
    #121212,
    #383836,
    #2c3e54,
    #316e83,
    #468590,
    #a8b4b2,
    #a4a4a4,
    #b3bf86
  );
  background-size: 400% 400%;
  animation: backgroundChange11 15s ease infinite;
}

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

// Fourth Row: Rotating Backgrounds - Ypu can easily change colors in background-image, linear-gradient

#container13 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(10% - 12px);
    height: calc(10% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes backgroundRotate {
  100% {
    transform: rotate(1turn);
  }
}

#container14 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -55%;
    top: -80%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate1 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes backgroundRotate1 {
  100% {
    transform: rotate(-1turn);
  }
}

#container15 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -99%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate2 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes backgroundRotate2 {
  100% {
    transform: rotate(1turn);
  }
}

#container16 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -99%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate3 3.5s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes backgroundRotate3 {
  0% {
    transform: translatex(0px, 0px);
  }
  25% {
    transform: translate(100px, 100px);
  }
  50% {
    transform: translate(0px, 100px);
  }
  75% {
    transform: translate(-100px, 100px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* Border Animations */

/* First row: Slow animations */

#containerB1 {
  animation: borderSpin0 5s ease infinite;
}

@keyframes borderSpin0 {
  0% {
    border-color: #bdc3c7;
  }
  25% {
    border-color: #2c3e50;
  }
  50% {
    border-position: 100% 50%;
    border-color: #c33764;
  }
  75% {
    border-color: #1d2671;
  }
  90% {
    border-position: 0% 50%;
    border-color: #141e30;
  }
  100% {
    border-position: 0% 50%;
    border-color: #6dd5ed;
  }
}

#containerB2 {
  animation: borderSpin1 5s ease infinite;
}

@keyframes borderSpin1 {
  0% {
    border-color: #d02090;
  }
  25% {
    border-color: #7c1000;
  }
  50% {
    border-position: 100% 50%;
    border-color: #ff4605;
  }
  75% {
    border-color: #f8a42f;
  }
  90% {
    border-position: 0% 50%;
    border-color: #d3312e;
  }
  100% {
    border-position: 0% 50%;
    border-color: #50010a;
  }
}

#containerB3 {
  animation: borderSpin2 5s ease infinite;
}

@keyframes borderSpin2 {
  0% {
    border-color: #c0cd50;
  }
  25% {
    border-position: 100% 75%;
    border-color: #00f77b;
  }
  50% {
    border-position: 75% 50%;
    border-color: #7df502;
  }
  75% {
    border-position: 50% 25%;
    border-color: #81cc39;
  }
  90% {
    border-position: 0% 50%;
    border-color: #887ba7;
  }
  100% {
    border-position: 50% 100%;
    border-color: #4e0169;
  }
}

#containerB4 {
  animation: borderSpin3 5s ease infinite;
}

@keyframes borderSpin3 {
  0% {
    border-color: #121212;
  }
  25% {
    border-position: 100% 75%;
    border-color: #383836;
  }
  50% {
    border-position: 75% 50%;
    border-color: #2c3e54;
  }
  75% {
    border-position: 50% 25%;
    border-color: #468590;
  }
  90% {
    border-position: 0% 50%;
    border-color: #a4a4a4;
  }
  100% {
    border-position: 50% 100%;
    border-color: #b3bf86;
  }
}

/* Second Row: Normal Border Animations (same colors)*/

#containerB5 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

#containerB6 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate1 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate1 {
  100% {
    transform: rotate(1turn);
  }
}

#containerB7 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate2 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate2 {
  100% {
    transform: rotate(0.5turn);
  }
}

#containerB8 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate3 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate3 {
  100% {
    transform: rotate(1turn);
  }
}

/* Third Row: Border Animations while playing with colors */

#containerB9 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 80% 80%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#bdc3c7, #bdc3c7),
      linear-gradient(#2c3e50, #2c3e50), linear-gradient(#c33764, #1d2671),
      linear-gradient(#1d2671, #6dd5ed);
    animation: rotate4 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate4 {
  100% {
    transform: rotate(1turn);
  }
}

#containerB10 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -75%;
    top: -75%;
    width: 200%;
    height: 200%;
    background-color: #d02090;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 100%;
    background-image: linear-gradient(#7c1000, #7c1000),
      linear-gradient(#ff4605, #ffd729), linear-gradient(#f8a42f, #f8a42f),
      linear-gradient(#ea0000, #ea0000), linear-gradient(#50010a, #50010a);
    animation: rotate5 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate5 {
  100% {
    transform: rotate(1turn);
  }
}

#containerB11 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
    animation: rotate6 4s ease infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate6 {
  100% {
    transform: rotate(1turn);
  }
}

#containerB12 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
    animation: rotate7 8s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes rotate7 {
  100% {
    transform: rotate(-2turn);
  }
}

/* Fourth Row: Border Animations while playing with colors */

// Rotating Border

// B13

.icon {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin 10s linear infinite;
}

.circle-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper:hover .circle {
  animation: spin 3s linear infinite;
}

.success {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin {
  100% {
    transform: rotateZ(360deg);
  }
}

// B14

.icon2 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle2 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 70%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin1 10s linear infinite;
}

.circle-wrapper2 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper2:hover .circle2 {
  animation: spin1 3s linear infinite;
}

.success2 {
  background-color: red;
  border: 2.5px dashed #4bb543;
}

@keyframes spin1 {
  0% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

// B15

.icon3 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle3 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin2 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
    animation: rotate7 8s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper3 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success3 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin2 {
  100% {
    transform: rotateZ(-360deg);
  }
}

// B16

.icon4 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle4 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin3 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
    animation: rotate6 4s ease infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper4 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success4 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin3 {
  100% {
    transform: rotateZ(-360deg);
  }
}

// B17

.icon5 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle5 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 80%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin4 10s linear infinite;
  background: linear-gradient(
    45deg,
    #c0cd50,
    #00f77b,
    #c0cd50,
    #7df502,
    #81cc39,
    #84a470,
    #887ba7,
    #8b52de,
    #4e0169
  );
  background-size: 400% 400%;
}

.circle-wrapper5 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper5:hover .circle5 {
  animation: spin4 3s linear infinite;
}

.success5 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin4 {
  50% {
    background-position: 100% 50%;
  }
  100% {
    transform: rotateZ(360deg);
    background-position: 0% 50%;
  }
}

//18

.icon6 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle6 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 70%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin5 10s linear infinite;
  background: linear-gradient(
    45deg,
    #d02090,
    #7c1000,
    #ff4605,
    #ffd729,
    #f8a42f,
    #d3312e,
    #ea0000,
    #50010a
  );
  background-size: 400% 400%;
}

.circle-wrapper6 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.circle-wrapper6:hover .circle6 {
  animation: spin5 3s linear infinite;
}

.success6 {
  background-color: red;
  border: 2.5px dashed #50010a;
}

@keyframes spin5 {
  0% {
    background-position: 0% 50%;
    transform: rotateZ(360deg);
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
    transform: rotateZ(-360deg);
  }
}

// B19

.icon7 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle7 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin6 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -100%;
    top: -100%;
    width: 300%;
    height: 200%;
    background-color: #a4a4a4;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#121212, #121212),
      linear-gradient(#383836, #316e83), linear-gradient(#2c3e54, #468590),
      linear-gradient(#a8b4b2, #b3bf86);
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper7 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success7 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -55%;
    top: -80%;
    width: 300%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%, 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: backgroundRotate1 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(0% - 12px);
    height: calc(0% - 12px);
    background: white;
    border-radius: 5px;
  }
}

@keyframes spin6 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
    transform: rotateZ(-360deg);
  }
}

// B20

.icon8 {
  position: absolute;
  color: white;
  font-size: 30px;
  top: 55px;
  left: 55px;
  transform: translate(-50%, -50%);
}

.circle8 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2.5px;
  background-clip: content-box;
  animation: spin7 10s linear infinite;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;

  &::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -60%;
    top: -50%;
    width: 200%;
    height: 250%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%, 100% 100%;
    background-image: linear-gradient(#00f77b, #00f77b),
      linear-gradient(#c0cd50, #c0cd50), linear-gradient(#7df502, #81cc39),
      linear-gradient(#84a470, #887ba7), linear-gradient(#8b52de, #4e0169);
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(90% - 12px);
    height: calc(90% - 12px);
    background: white;
    border-radius: 5px;
  }
}

.circle-wrapper8 {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.success8 {
  background-color: #4bb543;
  border: 2.5px dashed #4bb543;
}

@keyframes spin7 {
  100% {
    transform: rotateZ(-360deg);
  }
}

/* Other Visual stuff */

/* text */
.titles {
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
  font-family: "Asap", sans-serif;
  font-size: 40px;
  margin-top: 25px;
  margin-left: 5px;
}

#smallTitle {
  font-size: 35px;
  opacity: 0.8;
}

/* Containers */
.bigContainer {
  display: flex;
  justify-content: center;
}

.bigContainer + hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  border: 3px solid blue;
  border-radius: 10px;
  margin-right: 20px;
  padding-top: 35px;
  padding-bottom: 35px;
  width: 380px;
  font-family: "Yusei Magic", sans-serif;
  color: red;
  font-size: 35px;
  text-align: center;
}

.containerB {
  border: 5px solid blue;
  border-radius: 10px;
  margin-right: 20px;
  padding-top: 35px;
  padding-bottom: 35px;
  width: 380px;
  background-color: whitesmoke;
  font-family: "Yusei Magic", sans-serif;
  color: red;
  font-size: 35px;
  text-align: center;
}

.containerBRotating {
  height: 100vh;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -60px;
  margin-top: -200px;
}

.containerBRotating + .containerBRotating {
  margin-top: -300px;
}

.hr {
  margin-left: 50px;
  margin-right: 50px;
  height: 120px;
}

/* Info part and title */

.info {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2c3e50;
  font-family: "Asap", sans-serif;
  font-size: 35px;
  margin-top: 30px;
  margin-left: 25px;
  text-decoration: none;
}

.info1 {
  border: 1px solid red;
  border-width: 3px;
  border-radius: 50%;
  margin-right: 20px;
  border-right: none;
  padding: 20px;
  color: inherit;
  text-decoration: inherit;
}

.info1:hover {
  color: whitesmoke;
  border-color: #c31432;
  border-width: 8px;
  padding: 25px;
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite, borderSpin 10s ease infinite;
}

.info2 {
  padding: 2px;
  border: 1px solid red;
  border-width: 3px;
  border-radius: 50%;
  border-left: none;
  border-right: none;
  padding: 20px;
  color: inherit;
  text-decoration: inherit;
}

.info2:hover {
  color: whitesmoke;
  border-color: #c31432;
  border-width: 8px;
  padding: 25px;
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite, borderSpin 10s ease infinite;
}

.info3 {
  padding: 2px;
  border: 1px solid red;
  border-width: 3px;
  border-left: none;
  border-radius: 50%;
  margin-left: 20px;
  padding: 20px;
  color: inherit;
  text-decoration: inherit;
}

.info3:hover {
  color: whitesmoke;
  border-color: #c31432;
  border-width: 8px;
  padding: 25px;
  background: linear-gradient(
    -45deg,
    #bdc3c7,
    #2c3e50,
    #c33764,
    #1d2671,
    #141e30,
    #6dd5ed
  );
  background-size: 400% 400%;
  animation: backgroundChange 15s ease infinite, borderSpin 10s ease infinite;
}

/* Info animations */

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

@keyframes borderSpin {
  0% {
    border-color: #c31432;
  }
  50% {
    border-position: 100% 50%;
    border-color: #240b36;
  }
  100% {
    border-position: 0% 50%;
    border-color: #240b36;
  }
}

              
            
!

JS

              
                // By Lorenzo Satta Chiris

// No JS

              
            
!
999px

Console