If you’re looking to make your website pop with modern, dynamic design elements, then you’re in the right place! An Animated CSS Gradient Border is a fantastic way to grab attention and add some color and movement to your page. The best part? We’re giving you the full code for free and explaining how it works in simple language.
Let’s dive in and create this amazing effect step by step.
What Is an Animated CSS Gradient Border?
An Animated CSS Gradient Border is a border that cycles through a spectrum of colors, giving your webpage a vibrant and dynamic look. This border moves smoothly around an element, creating a visually appealing rotating gradient effect.
Why Use Animated Border?
- Makes your website look professional and modern.
- Draws attention to specific elements like images or text boxes.
- Easy to implement with minimal code.
Step-by-Step Code Explanation
1. HTML Structure
- We use a <div> container (#box) to hold our gradient border.
- Inside it, another <div> (#in) ensures the content (like images) is safely displayed without interference from the border animation.
- The <img> tag is used to display the image in the center.
2. CSS Styling of Animated CSS Gradient Border
- The #box element is styled with height, width, and overflow: hidden to create a container for the animated border.
- The ::after pseudo-element is where the magic happens. It creates the rotating border with:
- background-image: linear-gradient(…) to add gradient colors.
- animation: move 4s linear infinite to rotate it continuously.
- The animation uses a @keyframes rule to define a full rotation (rotate(0deg) to rotate(360deg)).
Customizing the Animation
You can adjust the animation speed or colors based on your needs:
- Change the Speed:
Modify animation: move 4s linear infinite; in the CSS.- For faster animation, reduce the time (e.g., 2s).
- For slower animation, increase the time (e.g., 6s).
- Change the Colors:
Update the background-image property in the #box::after pseudo-element.
Example:
css – background-image: linear-gradient(to right, purple, pink, cyan, lime);
Free Code for Animated CSS Gradient Border
Here’s the full HTML and CSS code you need to get started. Copy and paste it into your project and see the magic happen!👇
HTML Code:
<body>
<div id="box">
<div id="in">
<img src="man.jpg" alt="man">
</div>
</div>
</body>CSS Code:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#box {
height: 400px;
width: 400px;
background-color: #2f2f2f;
padding: 8px;
position: relative;
overflow: hidden;
}
#in {
height: 100%;
width: 100%;
background-color: #111;
position: relative;
z-index: 99;
}
img {
width: 100%;
height: 400px;
object-fit: cover;
}
#box::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
height: 600px;
width: 200px;
/* background-color: #fff; */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
animation: move 4s linear infinite;
/* Use linear easing for smooth rotation */
}
@keyframes move {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}Practical Uses for Animated CSS Gradient Borders
- Highlight important sections of your website.
- Add a creative touch to profile pictures or product images.
- Use as a loading screen effect.
Table: Key Properties and Their Functions
| Property | Function |
|---|---|
background-image | Adds the gradient colors to the border. |
animation | Controls the speed and smoothness of the rotation. |
@keyframes move | Defines how the border rotates around the element. |
overflow: hidden | Ensures the animation stays within the element bounds. |
FAQs for Animated CSS Gradient Border
1. Can I use this code on any website?
Yes, the code works on any modern browser and is easy to integrate into your project.
2. How can I slow down the animation?
Increase the animation duration in move 4s linear infinite; to a higher value like 8s for slower rotation.
3. Can I use different shapes for the border?
Yes, you can adjust the height, width, and other properties of the ::after pseudo-element to create custom shapes.
4. What happens if I remove the overflow: hidden?
The animation will spill outside the #box, creating a messy effect.
Conclusion
Adding an Animated CSS Gradient Border to your website is an easy way to make it stand out. With the free code provided above, you can quickly implement this effect and customize it to fit your style. Try it out today and give your webpage a modern, colorful touch!
Got questions or suggestions? Share them in the comments below!
