Animated CSS Border Gradients

Cole Turner
Cole Turner
2 min read
Cole Turner
Animated CSS Border Gradients
Blog
 
LIKE
 
LOVE
 
WOW
 
LOL

If you want to create a gradient border in CSS, either using a linear or repeating gradient, you will need to get creative. Gradient borders in CSS is not something that is supported out of the box.

But it is possible to mimic the effect using a gradient background.

CSS - Border Radient Example

In the example above, the gradient appears as a border around the image, starting from the top left to the bottom right.

Let's start with the following example:

<div class="portrait">
  <img src="/portrait.jpg" alt="Yours Truly!">
</div>

<style type="text/css">
  .portrait {
    width: 100px;
    height: 100px;
  }
  
  .portrait img {
    border-radius: 100px;
    width: inherit;
    height: inherit;
  }
</style>

The wrapper div will control the box model for the image tag, and provide a mechanism to anchor a new layer for the border gradient. The image will overlay that layer, and then we will add a border-radius to give it the desired effect.

Using CSS, we will add a :before pseudo element to create a layer without using any markup. We're going to absolutely position the new layer, and use a relative position for the .portrait element to anchor the new layer. The img element will have a relative position and a z-index that is higher than the pseudo element, so that it appears above the newly created layer.

.portrait {
  width: 100px;
  height: 100px;
+  position: relative;
}

+ .portrait::before {
+    background: red;
+     content: "";
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     width: 100%;
+     height: 100%;
+     padding: 5px;
+     transform: translate(-50%,-50%);
+     z-index: 1;
+ }

.portrait img {
  border-radius: 100px;
  width: inherit;
  height: inherit;
+   position: relative;
+   z-index: 2;
}

And now our element will look like this:

CSS Border Gradient - Example psuedo layer
Excellent! Now It's time to add a gradient, let's start with a linear-gradient.

We will replace our red background with a linear-gradient with three stops (0%, 50%, 100%). After making this change, our element should now have a gradient.

.portrait {
  width: 100px;
  height: 100px;
  position: relative;
}

.portrait::before {
-   background: red;
+   background: linear-gradient(to right, #00dbde 0%, green 50%, #00dbde 100%);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    padding: 5px;
    transform: translate(-50%,-50%);
    z-index: 1;
}

.portrait img {
  border-radius: 100px;
  width: inherit;
  height: inherit;
  position: relative;
  z-index: 2;
}
CSS Animated Border Gradient - Example Linear Gradient

For our animation, we would like the gradient to move from the right to the left. We will also need to increase the background size so that the gradient appears to flow continuously.

+ @keyframes linearGradientFlow {
+   0% {
+     background-position: 0%;
+   }
+ 
+   100% {
+     background-position: 200%;
+   }
+ }

.portrait {
  width: 100px;
  height: 100px;
  position: relative;
}

.portrait::before {
  background: linear-gradient(to right, #00dbde 0%, green 50%, #00dbde 100%);
+   background-size: 200%;
+   animation: linearGradientFlow 5s infinite linear;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 5px;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.portrait img {
  border-radius: 100px;
  width: inherit;
  height: inherit;
  position: relative;
  z-index: 2;
}

Now our gradient will span twice the size of the pseudo layer, and the animation will appear to flow continuously from right to left.

CSS Linear Gradient with Animation

And now we can use border radius to make it appear more like a border.

@keyframes linearGradientFlow {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }
}

.portrait {
  width: 100px;
  height: 100px;
  position: relative;
}

.portrait::before {
+   border-radius: 120px;
  background: linear-gradient(to right, #00dbde 0%, green 50%, #00dbde 100%);
  background-size: 200%;
  animation: linearGradientFlow 5s infinite linear;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 5px;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.portrait img {
  border-radius: 100px;
  width: inherit;
  height: inherit;
  position: relative;
  z-index: 2;
}
CSS Linear Gradient - Animated Border

That looks stunning! The gradient flows fluidly from right to left. Ship it! 🚀

 
LIKE
 
LOVE
 
WOW
 
LOL

Keep reading...

Standing Out LOUDER in the Technical Interview

5 min read

If you want to stand out in the technical interview, you need to demonstrate not only your technical skills but also your communication and collaboration skills. You need to think LOUDER.

Search Engine Optimization - Essentials for Web Developers

8 min read

Search Engine Optimization (SEO) can boost your page in search engines and boost your traffic. Every web developer should know about these basic optimizations.

See everything