Help with a code to make an animated border

I would like the help of friends to be able to make this type of effect in BSS, the effect was made in WP with the Elementor plugin.

Video link:

So far I only got this result.

Here the css code:

    --first-color: #ef32d9;
    --second-color: #89fffd;
    --size: 100px;
    --speed: 4s;
    overflow: hidden !important;
    display: flex;
    justify-content: center;
    align-items: center;
    content: '';
    position: absolute;
    width: var(--size);
    height: 140%;
    background: linear-gradient(var(--first-color), var(--second-color));
    animation: animate var(--speed) linear infinite;
@keyframes animate{
        transform: rotate(0deg);
        transform: rotate(360deg);

<div class="rotating-gradient">blah blah blah</div>


:root {
  --first-color: #ef32d9;
  --second-color: #89fffd;
  --size: 100px;
  --speed: 4s;

.rotating-gradient {
  --angle: 0deg;
  width: --size: 100px;
  height: height: 140%;
  border: 15px solid;
  border-image: conic-gradient(from var(--angle), var(--first-color), var(--second-color)) 1;
  animation: var(--speed) rotategrad linear infinite;

@keyframes rotategrad {
  to {
    --angle: 360deg;

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

Ideally you will need the div to be square to give a smooth transition.

1 Like

Thanks @richards @kuligaposten , it worked great, I’ll try to use the code in my project.

Damn, CSS is getting powerful!

I would say the feasibility of almost all CSS discussed in this thread is roughly possible for 3 years. But yes in general CSS continues to thrive with impressive advancements, with many big game changers coming ahead. :+1:

They seem to be making it more of a programming language, than just a styling language. It’s hard to keep up. There are already many CSS features that I haven’t learned. I remember feeling overwhelmed at having to learn pseudo classes!

Yes, said everyone regarding the web. :wink: