Introduction
In modern web design, animations are a great way to add dynamic effects to your website. In this tutorial, we’ll show you how to create a rainbow gradient border using only HTML and CSS.
Before writing the code, let’s first understand what it is.
✅ Watch Live Preview 👉👉
Click Here to Download the Code
Table of Contents
What is Gradient Border in CSS?
It is a border that transitions between colors, creating a smooth gradient effect. Instead of using a single color for the border, you can apply a gradient (a smooth transition from one color to another) around an element, making the border look more dynamic and visually interesting.
This effect is achieved using CSS gradients and can be customized with different colors and directions. Let’s break down the process step-by-step.
Similar Posts: How to Create Border Animation using HTML and CSS
Set Up Project
Start by creating a folder on your computer for your project. Inside this folder, create the following files:
- index.html
- style.css
Source code
HTML Code Structure
Before we dive into CSS, let’s first set up the basic HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Gradient Border Animation Using CSS Only | Rainbow Border CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap">
</head>
<body>
<!-- CODE -->
<div class="gradient-border">Rainbow Gradient Border Animation</div>
<!-- CODE END -->
</body>
</html>
CSS Code Structure
Next, let’s start by styling the content box. We’ll add some padding and set a background color for the inner area.
< /* Your CSS code here */ >
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: #000;
}
.gradient-border {
width: 450px;
height: 250px;
color: white;
font-size: 40px;
line-height: 60px;
background: #000;
position: relative;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Comfortaa', cursive;
}
.gradient-border:after {
content: '';
position: absolute;
height: 270px;
width: 470px;
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius: 5px;
-webkit-animation: animatedgradient 3s ease alternate infinite;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
z-index: -1;
}
@-webkit-keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
You May Also Like:
Animated Login and Signup Form using HTML CSS and JavaScript
Animated Circular Carousel/Slider using HTML and CSS only
Conclusion
In this tutorial, we have created an animated gradient border. By leveraging CSS gradients and keyframe animations, we have achieved a dynamic border effect that can be applied to any element on your webpage.
Feel free to experiment with different color combinations, timings, and hover effects to customize it to your needs.
This technique is lightweight, performs efficiently, and adds a modern touch to your website without relying on JavaScript or external libraries.
35 people downloaded this
Get It FREE Now
