Shine Sweep
Metallic & Holographic · Animated · pure CSS
A metallic base with a bright highlight bar that sweeps across the text on a loop. Adds a premium glint to any wordmark.
CSS
/* Shine Sweep — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Anton', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Anton', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
background-image:
linear-gradient(115deg,
transparent 38%,
hsl(292 30% 100% / 0) 44%,
hsl(292 20% 100% / 0.9) 50%,
hsl(292 30% 100% / 0) 56%,
transparent 62%),
linear-gradient(180deg,
hsl(292 18% 92%) 0%,
hsl(292 24% 70%) 40%,
hsl(292 34% 40%) 50%,
hsl(292 26% 66%) 62%,
hsl(292 18% 94%) 100%);
background-size: 300% 100%, 100% 100%;
background-position: 150% 0, 0 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 0 hsl(292 30% 24% / 0.7));
animation: text-effect-sweep 3.6s linear infinite;
}
@keyframes text-effect-sweep {
0% { background-position: 150% 0, 0 0; }
100% { background-position: -50% 0, 0 0; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Metallic & Holographic
- Type
- Animated
- Browser support
- background-clip:text + animated background-position (all modern, -webkit- prefixed)
- Capabilities
- pure