ASWCode | Glassmorphism Card Snippet

Glassmorphism Card

This snippet demonstrates a sleek glassmorphism card effect using CSS. It features a frosted-glass look created with the backdrop-filter: blur() property and semi-transparent backgrounds. Perfect for cards, profile sections, or feature highlights in modern web designs.

How to use: Copy the HTML & CSS into your project.
Change colors: Modify the rgba values for background and text.
Adjust effect: Change backdrop-filter: blur(10px) to increase or decrease the blur.

<div class="glass-card">
  <h2>Glass Card</h2>
  <p>Modern glassmorphism effect.</p>
</div>

<style>
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  color: #fff;
  padding: 30px;
  text-align: center;
  width: 250px;
}
body {
  background: linear-gradient(135deg, #2b1055, #7597de);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>