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.
Risograph Edition Label the 23rd of 30 designs in the 30 CSS Badges collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="riso-stage">
<div class="riso-card">
<div class="riso-corner riso-cy riso-tl"></div>
<div class="riso-corner riso-mg riso-tl"></div>
<div class="riso-corner riso-cy riso-tr"></div>
<div class="riso-corner riso-mg riso-tr"></div>
<div class="riso-corner riso-cy riso-bl"></div>
<div class="riso-corner riso-mg riso-bl"></div>
<div class="riso-corner riso-cy riso-br"></div>
<div class="riso-corner riso-mg riso-br"></div>
<div class="riso-blob"></div>
<div class="riso-blob riso-cyan"></div>
<div class="riso-content">
<div class="riso-eyebrow">
<span class="riso-pink">— SPECIAL EDITION —</span>
<span class="riso-cyan-text">— SPECIAL EDITION —</span>
</div>
<div class="riso-title">
<span class="riso-pink">LIMITED</span>
<span class="riso-cyan-text">LIMITED</span>
</div>
<div class="riso-title">
<span class="riso-pink">RUN '26</span>
<span class="riso-cyan-text">RUN '26</span>
</div>
<div class="riso-divider"></div>
<div class="riso-number">042 / 250</div>
<div class="riso-detail">Two-color riso on Lessebo natural · 297 × 420 mm · signed by the artist</div>
<div class="riso-stamp">PROOF</div>
<div class="riso-meta-bottom">
<span>STUDIO PRESS</span>
<span>NORTH CAROLINA</span>
</div>
</div>
</div>
</div> .riso-stage {
background: #d6cdb4;
padding: 50px 40px;
display: flex;
justify-content: center;
align-items: center;
min-height: 500px;
position: relative;
}
.riso-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;
}
.riso-corner {
position: absolute;
width: 10px;
height: 10px;
mix-blend-mode: multiply;
z-index: 2;
}
.riso-cy { background: #00b4d8; }
.riso-mg { background: #ff4d8d; transform: translate(2px, 2px); }
.riso-tl { top: 10px; left: 10px; }
.riso-tr { top: 10px; right: 10px; }
.riso-bl { bottom: 10px; left: 10px; }
.riso-br { bottom: 10px; right: 10px; }
.riso-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);
}
.riso-blob.riso-cyan {
background: #00b4d8;
width: 200px;
height: 200px;
top: 60%;
left: 38%;
opacity: 0.55;
}
.riso-card:hover .riso-blob { transform: translate(-46%, -52%); }
.riso-card:hover .riso-blob.riso-cyan { transform: translate(-44%, -48%); }
.riso-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
}
.riso-eyebrow {
font-size: 10px;
letter-spacing: 0.32em;
text-align: center;
margin-bottom: 10px;
position: relative;
line-height: 1;
height: 12px;
}
.riso-eyebrow .riso-pink,
.riso-eyebrow .riso-cyan-text {
position: absolute;
top: 0;
left: 0;
right: 0;
mix-blend-mode: multiply;
}
.riso-eyebrow .riso-pink { color: #ff4d8d; }
.riso-eyebrow .riso-cyan-text {
color: #00b4d8;
transform: translate(2px, -1px);
transition: transform 0.4s;
}
.riso-card:hover .riso-eyebrow .riso-cyan-text { transform: translate(5px, -2px); }
.riso-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;
}
.riso-title .riso-pink,
.riso-title .riso-cyan-text {
position: absolute;
top: 0;
left: 0;
right: 0;
mix-blend-mode: multiply;
}
.riso-title .riso-pink { color: #ff4d8d; }
.riso-title .riso-cyan-text {
color: #00b4d8;
transform: translate(3px, -1px);
transition: transform 0.4s;
}
.riso-card:hover .riso-title .riso-cyan-text { transform: translate(7px, -3px); }
@media (prefers-reduced-motion: reduce) {
.riso-blob, .riso-eyebrow .riso-cyan-text, .riso-title .riso-cyan-text { transition: none; }
}
.riso-divider {
width: 100%;
border-top: 1.5px dashed #ff4d8d;
margin: 28px 0 16px;
mix-blend-mode: multiply;
position: relative;
z-index: 2;
}
.riso-number {
font-size: 22px;
font-weight: 700;
text-align: center;
color: #1a1a1a;
margin-bottom: 10px;
z-index: 2;
position: relative;
}
.riso-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;
}
.riso-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;
}
.riso-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;
}