Vaporwave

Striped sunset, endless neon grid and chrome headings. Pure 80s dream.

1 uses · 0 likes

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

See the CSS

/* Vaporwave */
html, body { overflow-x: clip; }
body.zbr-page { background: linear-gradient(180deg, #1a0033 0%, #4b0f6b 40%, #ff2e88 62%, #1a0033 62%) fixed; }
/* striped sun sitting on the horizon */
body.zbr-page::before {
  content: ''; position: fixed; left: 50%; bottom: 38vh; z-index: -2;
  width: 60vmin; height: 60vmin; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #ffe66d 0%, #ff6ec7 75%);
  -webkit-mask-image: linear-gradient(#000 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 17px);
  mask-image: linear-gradient(#000 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 17px);
}
/* neon grid floor, scrolling toward you */
body.zbr-page::after {
  content: ''; position: fixed; left: -50%; right: -50%; top: 62vh; height: 100vh; z-index: -1;
  background:
    repeating-linear-gradient(90deg, #ff2e88 0 2px, transparent 2px 60px),
    repeating-linear-gradient(0deg, #ff2e88 0 2px, transparent 2px 60px),
    #1a0033;
  transform: perspective(300px) rotateX(60deg); transform-origin: top;
  animation: drive 1s linear infinite;
}
.zbr-card {
  border: 2px solid #00f0ff;
  border-radius: 4px;
  box-shadow: 0 0 22px rgba(0, 240, 255, .7), inset 0 0 22px rgba(0, 240, 255, .2);
}
.zbr-box-title, .zbr-name {
  font-style: italic; text-transform: uppercase; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff 0%, #8ef 45%, #ff6ec7 55%, #ffe66d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px #ff2e88);
}
.zbr-name { font-size: 1.9rem; }
.zbr-box-title { font-size: 1.15rem; }
.zbr-avatar { border: 2px solid #ff2e88; border-radius: 4px; box-shadow: 0 0 20px #ff2e88; }
.zbr-bio { color: #ffe66d; letter-spacing: .15em; }
.zbr-link {
  background: none; border: 0; border-radius: 0; padding: 9px 8px;
  text-transform: uppercase; letter-spacing: .15em; font-size: .85rem;
}
.zbr-link:hover { background: #ff2e88; color: #1a0033; box-shadow: 0 0 18px #ff2e88; }
.zbr-table th { color: #00f0ff; opacity: 1; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; }
.zbr-table th, .zbr-table td, .zbr-comment, .zbr-link { border-color: rgba(0, 240, 255, .25); }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar { border-radius: 2px; box-shadow: 0 0 10px rgba(255, 46, 136, .6); }
.zbr-noavatar { background: linear-gradient(180deg, #ff6ec7, #4b0f6b); }
.zbr-online { color: #00f0ff; }
.zbr-btn { background: #ff2e88; color: #fff; border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 0 16px #ff2e88; }
.zbr-views { color: #00f0ff; opacity: 1; }
@keyframes drive { to { background-position: 0 0, 0 60px, 0 0; } }