Gold Foil Stamp Text
A wordmark hot stamped in brushed gold foil on a dark card, with a slow specular glint gliding across the foil. Hairline texture, a metal gradient and a moving highlight band, all clipped to type.
Also known as: gold text css, css gold text, gold foil text effect, luxury gold text.
Maison Aurel
Paris · Est. 1924
HTML
<div class="txt-gold-foil-stamp-text"> <span class="txt-gold-foil-stamp-text-word">Maison Aurel</span> <span class="txt-gold-foil-stamp-text-sub">Paris · Est. 1924</span> </div>
CSS
.txt-gold-foil-stamp-text {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
--foil:
linear-gradient(105deg, transparent 42%, rgb(255 250 230 / 0.95) 50%, transparent 58%) 0 0 / 300% 100% no-repeat,
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.1) 0 0.02em, rgb(0 0 0 / 0.08) 0.02em 0.05em),
linear-gradient(180deg, #fbeab0 0%, #e2b850 32%, #a87a22 52%, #f1d27a 74%, #b98a2e 100%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.35em;
padding: 0.8em 1.5em 0.7em;
border-radius: 0.5em;
background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--c) 10%, #23262e), color-mix(in srgb, var(--c) 6%, #0d0e12));
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 0.4em 1em -0.4em rgb(0 0 0 / 0.55);
font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 500;}
.txt-gold-foil-stamp-text-word, .txt-gold-foil-stamp-text-sub {
background: var(--foil);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0.03em 0 rgb(0 0 0 / 0.7));
animation: txt-gold-foil-stamp-text-glint 6s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
.txt-gold-foil-stamp-text-word {
font-size: 1.15em;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-right: -0.16em;
}
.txt-gold-foil-stamp-text-sub {
font-family: system-ui, sans-serif;
font-size: 0.42em;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-right: -0.32em;
animation-delay: 0.25s;
}
@keyframes txt-gold-foil-stamp-text-glint {
0% { background-position: 130% 0, 0 0, 0 0; }
50%, 100% { background-position: -30% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.txt-gold-foil-stamp-text-word, .txt-gold-foil-stamp-text-sub { animation: none; background-position: 60% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.txt-gold-foil-stamp-text, .txt-gold-foil-stamp-text *, .txt-gold-foil-stamp-text::before, .txt-gold-foil-stamp-text::after, .txt-gold-foil-stamp-text *::before, .txt-gold-foil-stamp-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.