Aurora

Twinkling night sky with slow, glowing northern lights.

0 uses · 0 likes

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

See the CSS

/* Aurora */
html, body { overflow-x: clip; }
/* stars */
body.zbr-page::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent),
    radial-gradient(1px 1px at 75% 45%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, #fff, transparent),
    radial-gradient(1px 1px at 20% 90%, #fff, transparent),
    radial-gradient(1px 1px at 65% 85%, #fff, transparent);
  background-size: 300px 300px;
  animation: twinkle 4s ease-in-out infinite alternate;
}
/* aurora ribbons */
body.zbr-page::after {
  content: ''; position: fixed; inset: -20%; z-index: -1;
  background:
    radial-gradient(ellipse 60% 25% at 30% 30%, rgba(34, 211, 238, .5), transparent 70%),
    radial-gradient(ellipse 50% 20% at 70% 40%, rgba(74, 222, 128, .45), transparent 70%),
    radial-gradient(ellipse 40% 18% at 50% 20%, rgba(168, 85, 247, .4), transparent 70%);
  filter: blur(30px);
  animation: aurora 14s ease-in-out infinite alternate;
}
.zbr-card {
  border: 1px solid rgba(148, 255, 220, .18);
  border-radius: 24px;
  box-shadow: 0 0 60px rgba(34, 211, 238, .12);
}
.zbr-box-title, .zbr-name {
  font-weight: 600;
  background: linear-gradient(90deg, #5eead4, #a78bfa, #4ade80);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zbr-box-title { font-size: 1.1rem; width: fit-content; }
.zbr-avatar { border: 0; border-radius: 50%; box-shadow: 0 0 30px rgba(94, 234, 212, .55); }
.zbr-link { border-radius: 12px; padding-left: 12px; padding-right: 12px; border-color: rgba(148, 255, 220, .12); }
.zbr-link:hover { background: rgba(94, 234, 212, .1); color: #5eead4; }
.zbr-table th { color: #5eead4; opacity: .8; font-weight: 500; }
.zbr-table th, .zbr-table td, .zbr-comment { border-color: rgba(148, 255, 220, .12); }
.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, #0e7490, #6d28d9); }
.zbr-btn { background: linear-gradient(90deg, #5eead4, #a78bfa); color: #020617; }
@keyframes twinkle { to { opacity: .4; } }
@keyframes aurora {
  50% { transform: translateX(6%) skewY(-4deg) scaleY(1.2); }
  100% { transform: translateX(-6%) skewY(4deg); }
}