CSS Animated Border

By: The Softorax Development Team

Hi, welcome to Softorax, the best web development agency worldwide. Today we will be looking at one of the most painful aspect of CSS, “Border Animation in CSS.” By using unique and outstanding borders you can turn your website more appealing to the visitors. But hmmm… we all know CSS borders can only be a solid color, right? Well, yes. But by using some creative CSS tricks, we can take our border game one step further.

As we’ve discussed before, border animation in CSS can be surprisingly difficult. Other than using some common transitions, width, color it’s not really very easy to animate a border in CSS. This is where alternatives like pseudo elements come in handy.

In this tutorial, you will learn a very unique css border.

HTML

				
					<div class="animatedBorderNew">
        <h1>Softorax</h1>
    </div>

CSS

				
					body {
    display: flex;
    background-color: #121212;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;

}

.animatedBorderNew {
    position: relative;
    padding: 30px;
    background: #2b203e;
    border-radius: 10px;
    color: #FFFFFF;
    font-family: "Zalando Sans Expanded", sans-serif;
    font-size: 25px;
    font-weight: 300;

}

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


.animatedBorderNew::after, .animatedBorderNew::before {
    position: absolute;
    content: "";
    inset: -3px;
    background: linear-gradient(var(--spinningAngle),rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    z-index: -1;
    border-radius: inherit;
    animation: spinBorder 5s linear infinite;
}

.animatedBorderNew::before {
    filter: blur(5px);
}


@keyframes spinBorder {
    from {--spinningAngle: 0deg;}
    to {--spinningAngle: 360deg;}
}

Final Result

Softorax

The Best WordPress Web Development Agency