30 CSS Badges
23 / 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

Risograph Edition Label

Two-color riso print laid down by drum and squeegee. Pink and cyan with the deliberate misregistration that gives the process its hand. Hover widens the offset.

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-23-stage">
  <div class="bdg-23-card">
    <div class="bdg-23-corner bdg-23-cy bdg-23-tl"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-tl"></div>
    <div class="bdg-23-corner bdg-23-cy bdg-23-tr"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-tr"></div>
    <div class="bdg-23-corner bdg-23-cy bdg-23-bl"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-bl"></div>
    <div class="bdg-23-corner bdg-23-cy bdg-23-br"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-br"></div>

    <div class="bdg-23-blob"></div>
    <div class="bdg-23-blob bdg-23-cyan"></div>

    <div class="bdg-23-content">
      <div class="bdg-23-eyebrow">
        <span class="bdg-23-pink">— SPECIAL EDITION —</span>
        <span class="bdg-23-cyan-text">— SPECIAL EDITION —</span>
      </div>
      <div class="bdg-23-title">
        <span class="bdg-23-pink">LIMITED</span>
        <span class="bdg-23-cyan-text">LIMITED</span>
      </div>
      <div class="bdg-23-title">
        <span class="bdg-23-pink">RUN '26</span>
        <span class="bdg-23-cyan-text">RUN '26</span>
      </div>

      <div class="bdg-23-divider"></div>

      <div class="bdg-23-number">042 / 250</div>
      <div class="bdg-23-detail">Two-color riso on Lessebo natural · 297 × 420 mm · signed by the artist</div>

      <div class="bdg-23-stamp">PROOF</div>

      <div class="bdg-23-meta-bottom">
        <span>STUDIO PRESS</span>
        <span>NORTH CAROLINA</span>
      </div>
    </div>
  </div>
</div>
.bdg-23-stage {
  background: #d6cdb4;
  padding: 50px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.bdg-23-card {
  background: #efe8d2;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4.1;
  padding: 30px 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 18px 36px -14px rgba(40,30,10,0.4);
  font-family: "Space Mono", ui-monospace, monospace;
}

.bdg-23-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  mix-blend-mode: multiply;
  z-index: 2;
}

.bdg-23-cy {
  background: #00b4d8;
}

.bdg-23-mg {
  background: #ff4d8d;
  transform: translate(2px, 2px);
}

.bdg-23-tl {
  top: 10px;
  left: 10px;
}

.bdg-23-tr {
  top: 10px;
  right: 10px;
}

.bdg-23-bl {
  bottom: 10px;
  left: 10px;
}

.bdg-23-br {
  bottom: 10px;
  right: 10px;
}

.bdg-23-blob {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #ff4d8d;
  mix-blend-mode: multiply;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bdg-23-blob.bdg-23-cyan {
  background: #00b4d8;
  width: 200px;
  height: 200px;
  top: 60%;
  left: 38%;
  opacity: 0.55;
}

.bdg-23-card:hover .bdg-23-blob {
  transform: translate(-46%, -52%);
}

.bdg-23-card:hover .bdg-23-blob.bdg-23-cyan {
  transform: translate(-44%, -48%);
}

.bdg-23-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bdg-23-eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  line-height: 1;
  height: 12px;
}

.bdg-23-eyebrow .bdg-23-pink,
.bdg-23-eyebrow .bdg-23-cyan-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
}

.bdg-23-eyebrow .bdg-23-pink {
  color: #ff4d8d;
}

.bdg-23-eyebrow .bdg-23-cyan-text {
  color: #00b4d8;
  transform: translate(2px, -1px);
  transition: transform 0.4s;
}

.bdg-23-card:hover .bdg-23-eyebrow .bdg-23-cyan-text {
  transform: translate(5px, -2px);
}

.bdg-23-title {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 46px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-align: center;
  position: relative;
  margin-bottom: 4px;
  height: 42px;
}

.bdg-23-title .bdg-23-pink,
.bdg-23-title .bdg-23-cyan-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
}

.bdg-23-title .bdg-23-pink {
  color: #ff4d8d;
}

.bdg-23-title .bdg-23-cyan-text {
  color: #00b4d8;
  transform: translate(3px, -1px);
  transition: transform 0.4s;
}

.bdg-23-card:hover .bdg-23-title .bdg-23-cyan-text {
  transform: translate(7px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  .bdg-23-blob,
    .bdg-23-eyebrow .bdg-23-cyan-text,
    .bdg-23-title .bdg-23-cyan-text {
    transition: none;
  }
}

.bdg-23-divider {
  width: 100%;
  border-top: 1.5px dashed #ff4d8d;
  margin: 28px 0 16px;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 2;
}

.bdg-23-number {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
}

.bdg-23-detail {
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
  color: #444;
  max-width: 220px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

.bdg-23-stamp {
  position: absolute;
  bottom: 50px;
  right: 18px;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  transform: rotate(-10deg);
  z-index: 3;
  line-height: 1;
  border: 2px solid #ff4d8d;
  padding: 6px 10px;
  color: #ff4d8d;
  mix-blend-mode: multiply;
}

.bdg-23-meta-bottom {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.15);
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  position: relative;
  z-index: 2;
}
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: Risograph Edition Label
Source: https://codefronts.com/snippets/css-badges/risograph-edition-label/

Two-color riso print laid down by drum and squeegee. Pink and cyan with the deliberate misregistration that gives the process its hand. Hover widens the offset.
## HTML
```html
<div class="bdg-23-stage">
  <div class="bdg-23-card">
    <div class="bdg-23-corner bdg-23-cy bdg-23-tl"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-tl"></div>
    <div class="bdg-23-corner bdg-23-cy bdg-23-tr"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-tr"></div>
    <div class="bdg-23-corner bdg-23-cy bdg-23-bl"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-bl"></div>
    <div class="bdg-23-corner bdg-23-cy bdg-23-br"></div>
    <div class="bdg-23-corner bdg-23-mg bdg-23-br"></div>

    <div class="bdg-23-blob"></div>
    <div class="bdg-23-blob bdg-23-cyan"></div>

    <div class="bdg-23-content">
      <div class="bdg-23-eyebrow">
        <span class="bdg-23-pink">— SPECIAL EDITION —</span>
        <span class="bdg-23-cyan-text">— SPECIAL EDITION —</span>
      </div>
      <div class="bdg-23-title">
        <span class="bdg-23-pink">LIMITED</span>
        <span class="bdg-23-cyan-text">LIMITED</span>
      </div>
      <div class="bdg-23-title">
        <span class="bdg-23-pink">RUN '26</span>
        <span class="bdg-23-cyan-text">RUN '26</span>
      </div>

      <div class="bdg-23-divider"></div>

      <div class="bdg-23-number">042 / 250</div>
      <div class="bdg-23-detail">Two-color riso on Lessebo natural · 297 × 420 mm · signed by the artist</div>

      <div class="bdg-23-stamp">PROOF</div>

      <div class="bdg-23-meta-bottom">
        <span>STUDIO PRESS</span>
        <span>NORTH CAROLINA</span>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
.bdg-23-stage {
  background: #d6cdb4;
  padding: 50px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.bdg-23-card {
  background: #efe8d2;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4.1;
  padding: 30px 28px 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 18px 36px -14px rgba(40,30,10,0.4);
  font-family: "Space Mono", ui-monospace, monospace;
}

.bdg-23-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  mix-blend-mode: multiply;
  z-index: 2;
}

.bdg-23-cy {
  background: #00b4d8;
}

.bdg-23-mg {
  background: #ff4d8d;
  transform: translate(2px, 2px);
}

.bdg-23-tl {
  top: 10px;
  left: 10px;
}

.bdg-23-tr {
  top: 10px;
  right: 10px;
}

.bdg-23-bl {
  bottom: 10px;
  left: 10px;
}

.bdg-23-br {
  bottom: 10px;
  right: 10px;
}

.bdg-23-blob {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: #ff4d8d;
  mix-blend-mode: multiply;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bdg-23-blob.bdg-23-cyan {
  background: #00b4d8;
  width: 200px;
  height: 200px;
  top: 60%;
  left: 38%;
  opacity: 0.55;
}

.bdg-23-card:hover .bdg-23-blob {
  transform: translate(-46%, -52%);
}

.bdg-23-card:hover .bdg-23-blob.bdg-23-cyan {
  transform: translate(-44%, -48%);
}

.bdg-23-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bdg-23-eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  line-height: 1;
  height: 12px;
}

.bdg-23-eyebrow .bdg-23-pink,
.bdg-23-eyebrow .bdg-23-cyan-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
}

.bdg-23-eyebrow .bdg-23-pink {
  color: #ff4d8d;
}

.bdg-23-eyebrow .bdg-23-cyan-text {
  color: #00b4d8;
  transform: translate(2px, -1px);
  transition: transform 0.4s;
}

.bdg-23-card:hover .bdg-23-eyebrow .bdg-23-cyan-text {
  transform: translate(5px, -2px);
}

.bdg-23-title {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 46px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-align: center;
  position: relative;
  margin-bottom: 4px;
  height: 42px;
}

.bdg-23-title .bdg-23-pink,
.bdg-23-title .bdg-23-cyan-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
}

.bdg-23-title .bdg-23-pink {
  color: #ff4d8d;
}

.bdg-23-title .bdg-23-cyan-text {
  color: #00b4d8;
  transform: translate(3px, -1px);
  transition: transform 0.4s;
}

.bdg-23-card:hover .bdg-23-title .bdg-23-cyan-text {
  transform: translate(7px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  .bdg-23-blob,
    .bdg-23-eyebrow .bdg-23-cyan-text,
    .bdg-23-title .bdg-23-cyan-text {
    transition: none;
  }
}

.bdg-23-divider {
  width: 100%;
  border-top: 1.5px dashed #ff4d8d;
  margin: 28px 0 16px;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 2;
}

.bdg-23-number {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 10px;
  z-index: 2;
  position: relative;
}

.bdg-23-detail {
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
  color: #444;
  max-width: 220px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

.bdg-23-stamp {
  position: absolute;
  bottom: 50px;
  right: 18px;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  transform: rotate(-10deg);
  z-index: 3;
  line-height: 1;
  border: 2px solid #ff4d8d;
  padding: 6px 10px;
  color: #ff4d8d;
  mix-blend-mode: multiply;
}

.bdg-23-meta-bottom {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.15);
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  position: relative;
  z-index: 2;
}
```

How this works

A Risograph-print-edition badge: uneven ink overlay, halftone dot pattern, misregistered colour layers (cyan slightly offset from magenta), grainy paper texture. The pattern art-print shops, indie zine publishers, editorial-illustration studios ship.

Pure CSS. The misregister comes from layered pseudo-elements offset by 1-2px in opposite colours. The halftone uses a repeating radial-gradient. The paper grain uses a subtle noise texture via layered gradients.

Make it yours

  • Rebrand ink colours from --riso-cyan, --riso-magenta, and --paper.
  • Adjust misregister distance — 1px subtle, 3px pronounced.
  • Change the halftone density via the radial-gradient stops.
  • Add a small edition-number annotation (&ldquo;42 of 100&rdquo;) for authentic print-run feel.
  • Swap between Riso ink combos — fluorescent pink, medium blue, sunflower yellow, mint green (Risograph's actual palette).

Gotchas — read before shipping

  • The paper-grain texture is GPU-cheap when done via gradients — but if you're layering multiple grain textures, cap at 2-3 to avoid banding on older mobile.
  • Misregister is aesthetic, not a bug — but WCAG contrast still applies to any text; test the base ink colour, not the layered chromatic effect.
  • For accessibility, ensure the halftone pattern doesn't reduce text contrast below 4.5:1.
  • The aesthetic is culturally coded (indie / craft / editorial) — use in contexts that align, not corporate SaaS.

Browser support

ChromeSafariFirefoxEdge
45+9+16+45+

CSS gradients, pseudo-elements, and layered backgrounds are universally supported.

Techniques used in this demo

mix-blend-modeMDN ↗aspect-ratioMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →