CSS Gradient Border Animation Animation is a type of visually appealing effect that is used in various elements of the website such as buttons, cards, etc. Animating the border of an element using CSS gradients can not only look good but also increase user engagement. Today we will share with you a snippet about gradient border animation. The video tutorial below shows the step-by-step process of making it.
The gradient border CSS concept provides an eye-catching design when hovering over an element. This gradient border animation looks good on web applications or websites that are usually of dark-themed type. It is now common to see gradients used to animate the borders of HTML elements. There are many famous websites that use CSS gradient border animation. Some of them are Google, Twitter, Dribble, Behance, Codepen, etc.
You May Also Like:
CSS Full Screen Overlay Navigation
Background Animation HTML CSS and Particles JS
Responsive Bootstrap Vertical Tab Design
A website that has interactive buttons can use gradient border animation on hover or click events. This will undoubtedly boost the website's user engagement. It plays an important role in drawing the attention of users and increasing conversions. Apart from button elements, this gradient border animation can also be used in Dividers, Separators, Loading Indicators, or Service boxes.
The use of CSS gradient border animation has various advantages. Improved Visual Appeal, Engagement, Interactivity, Attention, and Focus are a few of them. Using CSS Gradient Properties, CSS Transitions, and Keyframes we can create dynamic gradient border effects without the need for JavaScript. This example of a CSS animation is cross-browser compatible, meaning it works with most current browsers.
<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
<title>Gradient Border Animation</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #212121;
}
.wrapper {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 400px;
width: 350px;
}
.box {
height: 400px;
width: 350px;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.box:before {
content: "";
height: 150%;
width: 150%;
position: absolute;
left: -25%;
top: -25%;
animation: animate 2s infinite linear;
background-image: conic-gradient(red, orange, yellow, green, blue, indigo, violet);
}
.box::after {
position: absolute;
content: "";
background-color: #212121;
height: 96%;
width: 96%;
top: 2%;
left: 2%;
border-radius: 5px;
}
@keyframes animate {
100% {
transform: rotate(-360deg);
}
}
For More CLICK HERE
Top comments (0)