Creating a Stunning Glassmorphism Card with Animated Light Effects

Hey there, fellow developers! 👋 Today, I’m super excited to share a cool UI design technique that’s been catching everyone’s eye lately – a glassmorphism card with a gorgeous animated light effect. This design combines modern aesthetics with subtle animations to create an engaging user experience that’s sure to make your website stand out.

What We’re Building

Imagine a frosted glass card floating over a background image, with a mesmerizing light streak that gracefully sweeps across its surface. The effect creates depth and movement, making even simple content feel dynamic and modern. It’s perfect for:

• Personal portfolios
• Feature cards
• Testimonial sections
• Product showcases
• Team member profiles

See the Pen Untitled by vishnu prabhakar (@vasurajoria) on CodePen.

The Magic Behind the Glass

Let’s break down the key ingredients that make this effect so special:

1. The Glassmorphism Effect

The heart of our design is the frosted glass effect. We achieve this using a combination of:

• A semi-transparent gradient background
• A blur effect on the background
• Subtle shadows for depth

.profile-card {
  background: linear-gradient(120deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
}

2. The Animated Light Streak

The magic happens with a pseudo-element that creates a moving light streak across the card. We use CSS animations to control its movement, scale, and color transitions:

.profile-card:after {
  content: "";
  background: cyan;
  filter: blur(30px);
  mix-blend-mode: lighten;
  animation: back-layer-movements 10s infinite linear;
}

3. Responsive Design

The card adapts beautifully to different screen sizes thanks to:

• Relative units for sizing
• CSS Grid for centering
• Maximum width constraints
• Flexible padding and margins

Pro Tips for Implementation

1. Performance Optimization
   • Use transform and opacity for animations as they’re GPU-accelerated
   • Keep the animation duration reasonable (we used 10 seconds)
   • Consider reducing animation complexity on mobile devices
2. Accessibility Considerations
   • Ensure sufficient contrast between text and background
   • Disable user selection to maintain the clean look
   • Use semantic HTML elements for better screen reader support
3. Browser Compatibility
   • Add fallbacks for browsers that don’t support backdrop-filter
   • Test across different browsers to ensure consistent appearance
   • Consider providing alternative styles for older browsers

Customization Ideas

Want to make this design your own? Here are some ways to customize it:

1. Color Variations
   • Change the gradient colors for different moods
   • Modify the light streak colors
   • Adjust the background image to match your theme
2. Animation Tweaks
   • Experiment with different animation durations
   • Modify the movement path
   • Add multiple light streaks
   • Try different blend modes
3. Layout Modifications
   • Adjust the card’s border radius
   • Change the padding and margins
   • Modify the content layout
   • Add hover effects

Final Thoughts

This glassmorphism card effect is more than just eye candy – it’s a testament to how far we can push modern CSS to create engaging, interactive experiences. While it looks complex, breaking it down into smaller components makes it quite approachable.

Remember, the key to successful implementation is finding the right balance between aesthetics and performance. Don’t be afraid to experiment with the values and make it your own!

Ready to Try It?

I’ve included the complete code below, so you can copy, paste, and start experimenting right away. Feel free to fork it, modify it, and make it shine in your own projects! ✨

HTML CODE

Animated Profile Card with Background Effect

<!-- HTML Structure -->
<!-- Profile card container with animated background effect -->
<div class="profile-card">
  <h3>About me</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste libero nulla quam temporibus explicabo accusantium</p>
  <a class="btn" href="#">more about me</a> 
</div>

CSS Code

<!-- CSS Styling -->
/* Reset and main background setup */
body {
  margin: 0px;
  height: 100vh;
  /* Background image setup with cover sizing */
  background: url("https://images.unsplash.com/photo-1460919920543-d8c45f4bd621?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  /* Center content using grid */
  display: grid;
  place-items: center;
}

/* Profile card styling */
.profile-card {
  /* Gradient background with transparency */
  background: linear-gradient(
    120deg,
    rgba(0,0,0,0.6) 0%,
    rgba(0,0,0,0.1) 100%
  );
  color: #fff;
  font-size: 16px;
  padding: 20px;
  max-width: 70%;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  /* Glass effect using backdrop filter */
  backdrop-filter: blur(10px);
  /* Card shadow for depth */
  box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
  font-family: arial;
  user-select: none;
}

/* Animated background effect */
.profile-card:after {
  content: "";
  background: cyan;
  height: 50px;
  width: 200px;
  position: absolute;
  border-radius: 10px;
  /* Create glowing effect */
  filter: blur(30px);
  transform: scale(2) rotate(-20deg);
  right: 0px;
  top: 0px;
  /* Blend mode for light effect */
  mix-blend-mode: lighten;
  pointer-events: none;
  /* Apply animation */
  animation: back-layer-movements 10s infinite linear;
}

/* Optional gradient shadow effect */
.gradient-shadow {
  box-shadow: 
    inset -2px 0px 2px 0px rgba(255,0,0,0.3),
    inset 1px 0px 0px 1px rgba(0,0,0,0.5);
}

/* Animation keyframes for background effect */
@keyframes back-layer-movements {
  0% {
    right: -120%;
    top: -50%;
    transform: scale(2) rotate(-20deg);
    background: black;
  }
  50% {
    right: 50%;
    top: 50%;
    background: red;
    transform: scale(3) rotate(20deg);
  }
  100% {
    right: 150%;
    top: -50%;
    transform: scale(2) rotate(-20deg);
    background: red;
  }
}

/* Button styling */
.btn {
  text-decoration: none;
  background: #000;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 50px;
}

Have you tried implementing this effect in your projects? I’d love to see your variations and hear about your experiences in the comments below!

Happy coding! 🚀