1

I created a box with a gradient border, and I'd like to animate that gradient so it's doing a 360 rotation.

With the code I'm currently working on, instead of the gradient background itself rotating, the actual box is rotating. Fun, but not the result I was going for. haha Any suggestions on how I can fix this? Here's my current code:

.gradient-border {
  position: relative;
  width: 500px;
  height: 500px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 25px; 
  border: 7px solid transparent;
  background: linear-gradient(45deg, #4158D0, #C850C0, #FFCC70) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: rotate-gradient linear 5s infinite;
}

@keyframes rotate-gradient {
  100% { 
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg);
  }
}
<div class="gradient-border"></div>

Thanks for your help!

shy0ctopus
  • 61
  • 5

2 Answers2

-1

Perhaps you could animate the background instead:

@keyframes rotate-gradient {
  100% {
    /*-webkit-transform: rotate(360deg);
    transform: rotate(360deg);*/
    background: linear-gradient(85deg, #4158D0, #C850C0, #FFCC70) border-box;
  }
}

And maybe bring down to 5s to 3s.

.gradient-border::before {
   animation: rotate-gradient linear 3s infinite;
}
}
Ma'Kama
  • 26
  • 4
-1

Try with custom css properties :

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  .gradient-border {
    --angle: 0deg;
    width: 500px;
    height: 500px;
    border: 1rem solid;
    border-image: linear-gradient(var(--angle), #4158D0, #C850C0, #FFCC70) 1;
    animation: rotate-gradient linear 2.5s infinite;
  }
  
  @keyframes rotate-gradient {
    100% {
      --angle : 360deg ;
    }
  }
<body>
    <div class="gradient-border"></div>
</body>
Prince
  • 95
  • 4
  • Thanks for this, but I want to be able to keep the inside of the box transparent, – shy0ctopus Mar 06 '23 at 08:57
  • Looks like the animation doesn’t work this way, presumably because of the use of border-image? Also I wanted to have rounded corners, which I can’t do with border-image. That’s why I initially chose to go the mask route. Perhaps what I want to do just isn’t possible without making some sort of compromise (ie no rounded corners and/or inside of box isn’t transparent) – shy0ctopus Mar 06 '23 at 16:59