Trendy Glassmorphism CSS Card UI Code (Copy & Paste)

Web design trends are constantly evolving, and one of the hottest styles right now is Glassmorphism. This effect creates a "frosted glass" look, adding depth and visual hierarchy to your website. It is widely used by major tech companies like Apple and Microsoft.

In this post, I will share a pure CSS code snippet to create a stunning Glassmorphism Card UI. It uses the backdrop-filter property to blur the background behind the card, making it look like a floating piece of glass. It’s modern, clean, and fully responsive.

Why use Glassmorphism?

Modern Aesthetic: It instantly makes your website look futuristic and premium.
Visual Depth: The blur effect creates a sense of depth, separating the content from the background.
Pure CSS: Achieved with just a few lines of CSS (no images or Photoshop needed).
Responsive Design: The card adjusts perfectly to any screen size, from mobile phones to desktops.

Live Preview

Hover over the card below to see the subtle glow effect!

Glass Card

This is a frosted glass effect created using CSS backdrop-filter. It creates a beautiful blur behind the element.

HTML & CSS Code

Copy the code below and paste it into your blog post or HTML widget. The code includes a colorful background to demonstrate the transparency effect.

<style>
/* Container Background (To show the glass effect) */
.glass-container {
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 10px;
}

/* Glass Card Style */
.glass-card {
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
  backdrop-filter: blur(10px); /* The Magic Blur */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  border-radius: 15px;
  padding: 40px;
  width: 300px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  color: white;
  text-align: center;
  transition: transform 0.3s ease;
  font-family: sans-serif;
}

.glass-card:hover {
  transform: translateY(-5px);
}

.glass-card h3 {
  margin-top: 0;
  font-size: 24px;
  margin-bottom: 15px;
}

.glass-card p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.9);
}

.glass-btn {
  background: white;
  color: #764ba2;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.glass-btn:hover {
  background: #764ba2;
  color: white;
}
</style>

<!-- HTML Structure -->
<div class="glass-container">
    <div class="glass-card">
        <h3>Glassmorphism</h3>
        <p>Experience the modern frosted glass effect. It adds elegance and depth to your UI design.</p>
        <button class="glass-btn">Get Started</button>
    </div>
</div>

How to Customize

The beauty of this code is that it is fully customizable. Here is how you can tweak it to fit your needs:

1. How to Adjust the Blur Intensity

The "frosted" look comes from the backdrop-filter property.
Find: backdrop-filter: blur(10px);
Change 10px to 5px for a clearer glass, or 20px for a more opaque, foggy glass.

2. How to Change Transparency

You can control how "see-through" the card is by changing the background opacity.
Find: background: rgba(255, 255, 255, 0.2);
The last number 0.2 controls transparency. Change it to 0.1 for more transparency, or 0.5 for a whiter, solid look.

3. How to Change the Size

If you want a wider card, find the .glass-card class.
Change width: 300px; to 100% or 500px depending on your layout.

Conclusion

Glassmorphism is a great way to make your Blogspot theme look professional and up-to-date. It works especially well on colorful backgrounds. Try adding this card to your homepage or sidebar! If you liked this code, please subscribe for more design tips.

Copy Paste Web Tips