Back
Learn how to build a dynamic profile avatar with a colorful animated border effect using pure CSS animations and gradients.
<div class="avatar-container">
<div class="avatar-frame">
<div class="avatar-content">
<img src="..." alt="Profile photo">
</div>
</div>
</div>
The image source URL should point to the user's profile picture. We've used a sample image from Unsplash for demonstration purposes.
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
Next, we style the avatar frame - this is where the magic happens. We use CSS variables to make the avatar highly customizable, defining the size, border width, and animation duration.
.avatar-frame {
--avatar-size: 80px;
--border-width: 4px;
--rotation-duration: 8s;
position: relative;
width: calc(var(--avatar-size) + var(--border-width) * 2);
height: calc(var(--avatar-size) + var(--border-width) * 2);
border-radius: 50%;
background: linear-gradient(135deg, #6366F1, #EC4899, #F59E0B, #10B981, #3B82F6);
background-size: 300% 300%;
animation: rotate-gradient var(--rotation-duration) linear infinite;
}
The key properties here:
- We calculate the total size to include both the avatar and its border
- The colorful background uses a linear gradient with five different colors
- We set the background size larger than the element to allow for movement in the animation
- The animation will continuously rotate the gradient position
To create the rotating gradient effect, we define a keyframes rule:
@keyframes rotate-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Next, we style the avatar content area that will contain the actual profile image:
.avatar-content {
position: absolute;
top: var(--border-width);
left: var(--border-width);
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
overflow: hidden;
background-color: white;
}
.avatar-content img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.avatar-frame:hover img {
transform: scale(1.1);
}
The avatar content is positioned absolutely within the frame, with its top and left offsets equal to the border width. This creates the effect of a colorful border around the profile image. We've also added a subtle zoom effect when hovering over the avatar.
Finally, we add a pseudo-element that creates a glow effect on hover:
.avatar-frame::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 50%;
background: inherit;
background-size: 300% 300%;
filter: blur(8px);
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease;
animation: rotate-gradient var(--rotation-duration) linear infinite reverse;
}
.avatar-frame:hover::after {
opacity: 0.7;
}
This pseudo-element creates a blurred background that inherits the same gradient as the frame but rotates in the opposite direction. It's hidden by default (opacity: 0) but becomes visible when hovering over the avatar, creating a colorful glow effect.
This animated frame avatar offers several advantages:
- Visual distinction: The colorful, animated border makes the avatar stand out from others on the page.
- Engagement indicator: The animation provides visual feedback when users interact with it.
- Customizable design: The CSS variables make it easy to adjust the size, border width, and animation speed.
- Modern aesthetic: The gradient colors and smooth animations create a contemporary, dynamic look.
- Brand identity: The gradient colors can be customized to match your brand palette.
This avatar design is ideal for creative platforms, gaming profiles, social media applications, or any interface where you want to add a touch of playfulness and visual interest to user profiles.
<div class="avatar-container">
<div class="avatar-frame">
<div class="avatar-content">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Profile photo">
</div>
</div>
</div>
<style>
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
.avatar-frame {
--avatar-size: 80px;
--border-width: 4px;
--rotation-duration: 8s;
position: relative;
width: calc(var(--avatar-size) + var(--border-width) * 2);
height: calc(var(--avatar-size) + var(--border-width) * 2);
border-radius: 50%;
background: linear-gradient(135deg, #6366F1, #EC4899, #F59E0B, #10B981, #3B82F6);
background-size: 300% 300%;
animation: rotate-gradient var(--rotation-duration) linear infinite;
}
@keyframes rotate-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.avatar-content {
position: absolute;
top: var(--border-width);
left: var(--border-width);
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
overflow: hidden;
background-color: white;
}
.avatar-content img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.avatar-frame:hover img {
transform: scale(1.1);
}
.avatar-frame::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 50%;
background: inherit;
background-size: 300% 300%;
filter: blur(8px);
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease;
animation: rotate-gradient var(--rotation-duration) linear infinite reverse;
}
.avatar-frame:hover::after {
opacity: 0.7;
}
</style>
Thank you for reading this article.
Comments