Create a Gradient Border Animation with CSS Custom Properties

Animated borders are everywhere in modern UI design. They make simple elements look alive and dynamic. The best part? You can do it with pure CSS.

The Problem

A static border looks fine, but it doesn’t grab attention. Designers often use animated gradients to give components a modern, interactive feel.

The Solution

You can animate a gradient border using a custom property that controls the gradient angle. With @property, CSS can smoothly animate this variable over time.

Here’s the full CSS:

div {
  width: 10rem;
  height: 10rem;
  --angle: 0deg;
  border: 1rem solid;
  border-image: linear-gradient(
    var(--angle),
    #12c2e9,
    #c471ed,
    #f64f59
  ) 1;
  animation: 5s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

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

Tips

You can change the gradient colors or animation speed to match your design.
The @property rule ensures smooth transitions between angle values.
This feature works in most modern browsers, but always check support for older versions.

Wrap-up

With just a few lines of CSS, you can create a professional-looking animated border. It’s a clean, performant, and modern effect—no JavaScript required.