30 CSS Badges
22 / 30

All 30 in 30 CSS Badges

  1. 01Upload Progress
  2. 02Typing Indicator
  3. 03Scrabble Tile
  4. 04Keycap Shortcut
  5. 05Transit Line Indicator
  6. 06Origami Craft Endorsement
  7. 07Hreflang Coverage
  8. 08E-E-A-T Scorecard
  9. 09Crawl & Index Status
  10. 10Schema Markup Type
  11. 11Search Intent Spectrum
  12. 12Core Web Vitals
  13. 13ECG Heartbeat
  14. 14Build Pipeline
  15. 15Countdown Ring
  16. 16Live Price Ticker
  17. 17File Extension Badge
  18. 18Dice Face
  19. 19Signal Bars
  20. 20Reading Time Indicator
  21. 21Aurora Status
  22. 22Vaporwave Chrome
  23. 23Risograph Edition Label
  24. 24Wax Seal Authentication
  25. 25Conference Lanyard
  26. 26Botanical Membership Tier
  27. 27Cyberpunk Glitch Notification
  28. 28Art Deco Medallion
  29. 29Brutalist Status Matrix
  30. 30Holographic Collectible
Pure CSSMIT licensed

Vaporwave Chrome

Release channel as marquee. Chrome lettering over a synthwave horizon, ticker tape reminding you exactly what kind of trouble you are in. The sun is striped. The grid recedes. The warning never stops scrolling.

Live Demo
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="bdg-22-stage">
  <div class="bdg-22-sun"></div>
  <div class="bdg-22-grid"></div>
  <div class="bdg-22-card">
    <div class="bdg-22-corner bdg-22-tl"></div>
    <div class="bdg-22-corner bdg-22-tr"></div>
    <div class="bdg-22-corner bdg-22-bl"></div>
    <div class="bdg-22-corner bdg-22-br"></div>

    <div class="bdg-22-eyebrow">▼ RELEASE CHANNEL ▼</div>
    <div class="bdg-22-chrome">BETA</div>
    <div class="bdg-22-divider"></div>
    <div class="bdg-22-version">v 4.18.2 // BUILD 26·05·13</div>

    <div class="bdg-22-marquee">
      <div class="bdg-22-marquee-track">
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
      </div>
    </div>
  </div>
</div>
.bdg-22-stage {
  background: linear-gradient(180deg, #0c0628 0%, #2a0e58 45%, #c83a8c 100%);
  padding: 0;
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bdg-22-sun {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ffeb3b 0%, #ff6ec7 45%, transparent 75%);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}

.bdg-22-sun::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 16px,
      #0c0628 16px, #0c0628 20px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
  mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
}

.bdg-22-grid {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 55%;
  background: linear-gradient(180deg, transparent 0%, #0c0628 90%), repeating-linear-gradient(90deg, #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 60px), repeating-linear-gradient(0deg,  #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 30px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: bottom;
  z-index: 0;
}

.bdg-22-card {
  position: relative;
  z-index: 1;
  background: rgba(20, 8, 50, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 100, 200, 0.5);
  padding: 38px 44px 0;
  text-align: center;
  width: min(380px, calc(100% - 80px));
  margin: 60px auto;
}

.bdg-22-corner {
  position: absolute;
  width: 16px;
  height: 16px;
}

.bdg-22-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid #4dffff;
  border-left: 2px solid #4dffff;
}

.bdg-22-tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid #ff37b3;
  border-right: 2px solid #ff37b3;
}

.bdg-22-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid #ff37b3;
  border-left: 2px solid #ff37b3;
}

.bdg-22-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid #4dffff;
  border-right: 2px solid #4dffff;
}

.bdg-22-eyebrow {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 8px;
  color: #ff77ee;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}

.bdg-22-chrome {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg,
      #ffffff 0%, #ffffff 18%, #ff8ce6 36%,
      #6cd1ff 50%, #ffffff 60%, #ff8ce6 78%, #4488cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 100, 200, 0.7)) drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}

.bdg-22-divider {
  width: 70%;
  margin: 12px auto 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff77ee 30%, #4dffff 70%, transparent);
}

.bdg-22-version {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #6cd1ff;
  margin-bottom: 18px;
}

.bdg-22-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,100,200,0.3);
  border-bottom: 1px solid rgba(255,100,200,0.3);
  padding: 8px 0;
  margin: 0 -44px;
}

.bdg-22-marquee-track {
  display: flex;
  gap: 14px;
  animation: bdg-22-scroll 14s linear infinite;
  white-space: nowrap;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 7px;
  color: #ff8ce6;
  letter-spacing: 0.12em;
  width: max-content;
}

.bdg-22-marquee-track span {
  display: inline-block;
}

@keyframes bdg-22-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bdg-22-marquee-track {
    animation: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Badge from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Vaporwave Chrome
Source: https://codefronts.com/snippets/css-badges/vaporwave-chrome/

Release channel as marquee. Chrome lettering over a synthwave horizon, ticker tape reminding you exactly what kind of trouble you are in. The sun is striped. The grid recedes. The warning never stops scrolling.
## HTML
```html
<div class="bdg-22-stage">
  <div class="bdg-22-sun"></div>
  <div class="bdg-22-grid"></div>
  <div class="bdg-22-card">
    <div class="bdg-22-corner bdg-22-tl"></div>
    <div class="bdg-22-corner bdg-22-tr"></div>
    <div class="bdg-22-corner bdg-22-bl"></div>
    <div class="bdg-22-corner bdg-22-br"></div>

    <div class="bdg-22-eyebrow">▼ RELEASE CHANNEL ▼</div>
    <div class="bdg-22-chrome">BETA</div>
    <div class="bdg-22-divider"></div>
    <div class="bdg-22-version">v 4.18.2 // BUILD 26·05·13</div>

    <div class="bdg-22-marquee">
      <div class="bdg-22-marquee-track">
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
        <span>UNSTABLE</span><span>·</span>
        <span>FOR INTERNAL USE</span><span>·</span>
        <span>EXPECT TURBULENCE</span><span>·</span>
        <span>NOT FOR PRODUCTION</span><span>·</span>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
.bdg-22-stage {
  background: linear-gradient(180deg, #0c0628 0%, #2a0e58 45%, #c83a8c 100%);
  padding: 0;
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bdg-22-sun {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, #ffeb3b 0%, #ff6ec7 45%, transparent 75%);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}

.bdg-22-sun::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 16px,
      #0c0628 16px, #0c0628 20px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
  mask: linear-gradient(180deg, transparent 0%, transparent 52%, #000 62%);
}

.bdg-22-grid {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 55%;
  background: linear-gradient(180deg, transparent 0%, #0c0628 90%), repeating-linear-gradient(90deg, #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 60px), repeating-linear-gradient(0deg,  #ff37b3 0px, #ff37b3 1px, transparent 1px, transparent 30px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: bottom;
  z-index: 0;
}

.bdg-22-card {
  position: relative;
  z-index: 1;
  background: rgba(20, 8, 50, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 100, 200, 0.5);
  padding: 38px 44px 0;
  text-align: center;
  width: min(380px, calc(100% - 80px));
  margin: 60px auto;
}

.bdg-22-corner {
  position: absolute;
  width: 16px;
  height: 16px;
}

.bdg-22-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid #4dffff;
  border-left: 2px solid #4dffff;
}

.bdg-22-tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid #ff37b3;
  border-right: 2px solid #ff37b3;
}

.bdg-22-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid #ff37b3;
  border-left: 2px solid #ff37b3;
}

.bdg-22-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid #4dffff;
  border-right: 2px solid #4dffff;
}

.bdg-22-eyebrow {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 8px;
  color: #ff77ee;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}

.bdg-22-chrome {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg,
      #ffffff 0%, #ffffff 18%, #ff8ce6 36%,
      #6cd1ff 50%, #ffffff 60%, #ff8ce6 78%, #4488cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 100, 200, 0.7)) drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}

.bdg-22-divider {
  width: 70%;
  margin: 12px auto 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff77ee 30%, #4dffff 70%, transparent);
}

.bdg-22-version {
  font-family: "Major Mono Display", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #6cd1ff;
  margin-bottom: 18px;
}

.bdg-22-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,100,200,0.3);
  border-bottom: 1px solid rgba(255,100,200,0.3);
  padding: 8px 0;
  margin: 0 -44px;
}

.bdg-22-marquee-track {
  display: flex;
  gap: 14px;
  animation: bdg-22-scroll 14s linear infinite;
  white-space: nowrap;
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 7px;
  color: #ff8ce6;
  letter-spacing: 0.12em;
  width: max-content;
}

.bdg-22-marquee-track span {
  display: inline-block;
}

@keyframes bdg-22-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bdg-22-marquee-track {
    animation: none;
  }
}
```

How this works

A 1980s vaporwave-aesthetic chrome badge: metallic gradient face, pink/cyan/magenta neon glow, italic display font, subtle grid-line texture. The pattern retro brand campaigns, synthwave gaming products, nostalgia-driven marketing use.

Pure CSS. The chrome gradient is a multi-stop linear-gradient with light-and-dark stripes to simulate a polished metal surface. The neon glow uses layered text-shadow in pink and cyan for the classic vaporwave chromatic split.

Make it yours

  • Rebrand vaporwave hues from --pink, --cyan, --chrome-light, --chrome-dark on the wrapper.
  • Change the display font (Major Mono Display, VT323, Press Start 2P) for different retro moods.
  • Adjust chrome polish via the gradient stop positions — tighter stops = more polished, wider = brushed metal.
  • Add a scanline overlay for full CRT-vaporwave authenticity.
  • Change badge shape from pill to hexagon or shield for arcade / gaming variants.

Gotchas — read before shipping

  • The pink+cyan text-shadow chromatic split can trigger photosensitive users — pair with reduced-motion consideration if animated.
  • Ensure the display font is web-loaded via Google Fonts or self-hosted — the aesthetic falls apart without the right typography.
  • Vaporwave aesthetics can feel dated fast — use for campaign / nostalgia contexts, not for evergreen production UIs.
  • Multi-layered text-shadows compound cost — cap at 4 layers to avoid GPU spike on mobile.

Browser support

ChromeSafariFirefoxEdge
76+9+103+76+

Floor set by backdrop-filter as this demo is written. The core technique itself goes back further — Chrome 45+.

CSS gradients, text-shadow, and custom fonts are universally supported. Google Fonts / self-hosted fonts work in every browser.

Techniques used in this demo

background-clip: textMDN ↗3D transforms (perspective + preserve-3d)MDN ↗filterMDN ↗backdrop-filterMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →