About this snippet

Build an eye-catching profile card with frosted glass. We animated a glowing gradient orb behind the content, which gives your design a stunning and futuristic look.

Size
2.1 KB
Uses
HTML, CSS
Loads
placehold.co
Views
204
<div class="card-container">
  <div class="glow-orb"></div>
  <div class="glass-card">
    <img src="https://placehold.co/80x80/3b82f6/ffffff?text=User" alt="Profile" class="profile-img">
    <h3>Premium Member</h3>
    <p>Unlock all features with this visually stunning glassmorphism interface.</p>
    <button class="glass-btn">View Dashboard</button>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}

.card-container {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.glow-orb {
  position: absolute;
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #3b82f6, #ec4899);
  border-radius: 50%;
  filter: blur(40px);
  animation: floatOrb 6s infinite ease-in-out;
}

@keyframes floatOrb {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-30px) scale(1.1);
  }
}

.glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px 30px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.profile-img {
  border-radius: 50%;
  margin-bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.glass-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.glass-card p {
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 30px;
}

.glass-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save