Scratch Cards
Lottery foil scratch cards — hot-pink envelopes covered with holographic silver foil that wipes clear on hover, revealing the neon prize amount.
Scratch Cards the 22nd of 22 designs in the 22 CSS Stacked Card Designs 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="scd-scr">
<div class="scd-scr__c" style="--r: -8deg">
<span class="scd-scr__p">$50</span><span class="scd-scr__f"></span>
</div>
<div class="scd-scr__c" style="--r: 0deg">
<span class="scd-scr__p">$100</span><span class="scd-scr__f"></span>
</div>
<div class="scd-scr__c" style="--r: 8deg">
<span class="scd-scr__p">$25</span><span class="scd-scr__f"></span>
</div>
</div> .scd-scr {
position: relative; width: 240px; height: 150px; margin: 0 auto;
display: flex; justify-content: center; align-items: center;
}
.scd-scr__c {
position: relative;
width: 84px; height: 116px; margin: 0 -8px;
background: #e0387b;
border: 2px solid #1a0033;
border-radius: 6px;
transform: rotate(var(--r));
display: grid; place-items: center;
box-shadow: 0 6px 14px -4px rgba(224,56,123,0.6);
overflow: hidden;
cursor: pointer;
}
.scd-scr__p {
font: 900 24px/1 ui-monospace, monospace;
color: #3eff7f;
text-shadow: 0 0 8px rgba(62,255,127,0.4);
letter-spacing: 0.06em;
}
.scd-scr__f {
position: absolute; inset: 0;
background-image:
linear-gradient(135deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%),
linear-gradient(135deg, #cfd8dc 0%, #90a4ae 50%, #cfd8dc 100%);
transition: opacity .4s;
}
.scd-scr__f::after {
content: 'SCRATCH';
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
font: 900 11px ui-monospace, monospace;
color: rgba(26,0,51,0.5); letter-spacing: 0.16em;
}
.scd-scr__c:hover .scd-scr__f { opacity: 0; }