Glass

Frosted glass blocks over soft color blobs. Clean and modern.

0 uses · 0 likes

Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.

See the CSS

/* Glass */
body.zbr-page {
  background:
    radial-gradient(circle at 15% 15%, #ec4899 0, transparent 32%),
    radial-gradient(circle at 85% 60%, #06b6d4 0, transparent 32%),
    radial-gradient(circle at 40% 100%, #8b5cf6 0, transparent 40%),
    #0f172a fixed;
}
.zbr-card {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.zbr-box-title { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.zbr-avatar { border: 0; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.zbr-name { font-weight: 600; }
.zbr-link { border-radius: 12px; padding-left: 12px; padding-right: 12px; border-color: rgba(255, 255, 255, .12); }
.zbr-link:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.zbr-table th { opacity: .55; font-weight: 500; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 50%; }
.zbr-noavatar { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.zbr-btn { background: rgba(255, 255, 255, .16); color: #fff; }
.zbr-btn:hover { background: rgba(255, 255, 255, .28); filter: none; }