Copper Patina Text
Polished copper letters slowly oxidize into blotchy green verdigris, then a sheen sweeps through and polishes them bright again. Patina is a textured copy masked by radial blooms on a registered size.
Also known as: copper text effect css, verdigris text, patina text animation, oxidized metal text.
Liberty
HTML
<div class="txt-copper-patina-text"> <span class="txt-copper-patina-text-word">Liberty</span> <span class="txt-copper-patina-text-patina" aria-hidden="true">Liberty</span> </div>
CSS
@property --txt-copper-patina-text-r {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
.txt-copper-patina-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.8);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
display: inline-grid;
letter-spacing: 0.01em;}
.txt-copper-patina-text > span {
grid-area: 1 / 1;
}
.txt-copper-patina-text-word {
background:
linear-gradient(110deg, transparent 38%, rgb(255 236 220 / 0.9) 50%, transparent 62%) 0 0 / 280% 100% no-repeat,
linear-gradient(180deg, #f8c8a2 0%, #d8854c 30%, #9a4f26 54%, #e7a06d 76%, #8c4520 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0.03em 0 #5c2d12);
animation: txt-copper-patina-text-polish 7s ease-in-out infinite;
}
.txt-copper-patina-text-patina {
--r: var(--txt-copper-patina-text-r);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 2em 2em,
radial-gradient(ellipse 50% 40% at 30% 60%, #9ee0c9, transparent) 0 0 / 1.3em 1em,
linear-gradient(180deg, #8fd6bf 0%, #4fa894 55%, #2f7768 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-mask:
radial-gradient(circle at 18% 70%, #000 var(--r), transparent calc(var(--r) + 0.5em)),
radial-gradient(circle at 58% 25%, #000 calc(var(--r) * 0.8), transparent calc(var(--r) * 0.8 + 0.45em)),
radial-gradient(circle at 88% 80%, #000 calc(var(--r) * 0.9), transparent calc(var(--r) * 0.9 + 0.5em));
mask:
radial-gradient(circle at 18% 70%, #000 var(--r), transparent calc(var(--r) + 0.5em)),
radial-gradient(circle at 58% 25%, #000 calc(var(--r) * 0.8), transparent calc(var(--r) * 0.8 + 0.45em)),
radial-gradient(circle at 88% 80%, #000 calc(var(--r) * 0.9), transparent calc(var(--r) * 0.9 + 0.5em));
animation: txt-copper-patina-text-oxidize 7s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes txt-copper-patina-text-oxidize {
0%, 4% { --txt-copper-patina-text-r: -0.5em; opacity: 1; }
52%, 64% { --txt-copper-patina-text-r: 2.6em; opacity: 1; }
80% { --txt-copper-patina-text-r: 2.6em; opacity: 0; }
80.1%, 100% { --txt-copper-patina-text-r: -0.5em; opacity: 0; }
}
@keyframes txt-copper-patina-text-polish {
0%, 64% { background-position: 140% 0, 0 0; }
84%, 100% { background-position: -40% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.txt-copper-patina-text-word, .txt-copper-patina-text-patina { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-copper-patina-text, .txt-copper-patina-text *, .txt-copper-patina-text::before, .txt-copper-patina-text::after, .txt-copper-patina-text *::before, .txt-copper-patina-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.