Wax Seal Authentication
Embossed oxblood wax disc over a written page, anchored by a gold-leaf monogram. Click the seal to press — the disc compresses, holds, releases. Drips peek out from the base.
Wax Seal Authentication the 24th of 30 designs in the 30 CSS Badges collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). 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="wax-stage">
<div class="wax-paper">
<div class="wax-watermark">CERTIFIED</div>
<div class="wax-eyebrow">— Certificate of Authenticity —</div>
<div class="wax-line-top">By my hand and seal, on this day —</div>
<div class="wax-signature">A. Whitmore</div>
<div class="wax-seal" id="wax-seal-1">
<div class="wax-drip wax-drip-1"></div>
<div class="wax-drip wax-drip-2"></div>
<div class="wax-disc">
<div class="wax-monogram">
<svg viewBox="0 0 100 100" fill="none" aria-hidden="true">
<circle cx="50" cy="50" r="34" stroke="#3a0d11" stroke-width="0.6" opacity="0.5"/>
<circle cx="50" cy="50" r="28" stroke="#3a0d11" stroke-width="0.4" opacity="0.4"/>
<path d="M 28 70 L 28 30 L 50 60 L 72 30 L 72 70" stroke="#3a0d11" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="50" cy="14" r="1.6" fill="#3a0d11"/>
<circle cx="50" cy="86" r="1.6" fill="#3a0d11"/>
<circle cx="14" cy="50" r="1.6" fill="#3a0d11"/>
<circle cx="86" cy="50" r="1.6" fill="#3a0d11"/>
</svg>
</div>
<div class="wax-highlight"></div>
</div>
</div>
<div class="wax-line-bottom">Document N° A-2026-0481</div>
</div>
</div> .wax-stage {
background: linear-gradient(180deg, #ece2c8 0%, #ddd0b0 100%);
padding: 48px 36px;
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
}
.wax-paper {
background: #f6ecd2;
width: 100%;
max-width: 360px;
padding: 44px 36px 36px;
box-shadow:
0 28px 50px -18px rgba(80,60,30,0.35),
0 10px 18px -4px rgba(80,60,30,0.18),
inset 0 0 0 1px rgba(120,90,50,0.12);
position: relative;
text-align: center;
transform: rotate(-1.2deg);
}
.wax-watermark {
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%) rotate(-12deg);
font-family: "Cinzel", Georgia, serif;
font-size: 52px;
font-weight: 700;
color: rgba(120, 80, 40, 0.06);
letter-spacing: 0.25em;
pointer-events: none;
}
.wax-eyebrow {
font-family: "Cinzel", Georgia, serif;
font-size: 9px;
letter-spacing: 0.4em;
color: #8a6630;
margin-bottom: 6px;
position: relative;
}
.wax-line-top {
font-family: "Cormorant Garamond", Georgia, serif;
font-style: italic;
font-size: 13px;
color: #5a4222;
letter-spacing: 0.04em;
margin-bottom: 2px;
position: relative;
}
.wax-signature {
font-family: "Tangerine", "Cormorant Garamond", cursive;
font-size: 44px;
color: #3a2814;
line-height: 1;
margin: 2px 0 22px;
position: relative;
}
.wax-seal {
width: 178px;
height: 178px;
margin: 0 auto 22px;
position: relative;
cursor: pointer;
}
.wax-disc {
width: 100%;
height: 100%;
position: relative;
border-radius: 50% 47% 53% 49% / 49% 52% 48% 51%;
background: radial-gradient(circle at 32% 28%,
#a83040 0%,
#802028 22%,
#4e121a 60%,
#2a0a10 100%);
box-shadow:
inset 6px 8px 14px rgba(0,0,0,0.45),
inset -3px -5px 10px rgba(255,180,180,0.12),
inset 2px 2px 4px rgba(255,200,200,0.25),
8px 12px 22px rgba(40,8,12,0.45),
3px 5px 10px rgba(94,26,31,0.4);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.wax-seal.is-pressed .wax-disc {
animation: wax-press 0.55s ease-out;
}
@keyframes wax-press {
0% { transform: scale(1); }
25% { transform: scale(0.94); }
60% { transform: scale(1.015); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.wax-seal.is-pressed .wax-disc { animation: none; }
}
.wax-disc::before {
content: '';
position: absolute;
inset: 7px;
border-radius: inherit;
border: 1px solid rgba(255,180,180,0.12);
pointer-events: none;
}
.wax-monogram {
width: 64%;
height: 64%;
position: relative;
z-index: 2;
filter:
drop-shadow(0 -1px 0.5px rgba(255,180,180,0.5))
drop-shadow(0 1.5px 1px rgba(0,0,0,0.65));
}
.wax-monogram svg { width: 100%; height: 100%; display: block; }
.wax-highlight {
position: absolute;
top: 14%;
left: 20%;
width: 36%;
height: 24%;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,200,200,0.5), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: 3;
}
.wax-drip {
position: absolute;
background: radial-gradient(circle at 30% 30%, #802028 0%, #4e121a 60%, #2a0a10 100%);
box-shadow:
inset 2px 3px 5px rgba(0,0,0,0.4),
2px 4px 7px rgba(40,8,12,0.5);
z-index: 1;
}
.wax-drip-1 {
width: 20px;
height: 26px;
bottom: -6px;
right: 26px;
border-radius: 42% 58% 50% 50% / 60% 60% 40% 40%;
}
.wax-drip-2 {
width: 12px;
height: 14px;
bottom: -10px;
right: 14px;
border-radius: 50%;
}
.wax-line-bottom {
font-family: "Cinzel", Georgia, serif;
font-size: 9px;
letter-spacing: 0.32em;
color: #6a4a22;
text-transform: uppercase;
position: relative;
margin-top: 8px;
} // Click the wax seal to play the press animation. Toggling the class
// via re-flow ensures the keyframe restarts on every click instead of
// only firing once.
var seal = document.getElementById('wax-seal-1');
if (seal) {
seal.addEventListener('click', function () {
seal.classList.remove('is-pressed');
void seal.offsetWidth;
seal.classList.add('is-pressed');
});
}