Oil Slick
Metallic & Holographic · Animated · pure CSS
A dark petrol iridescence — deep blue, violet, green and magenta in a slowly rotating conic sheen clipped to the text. Moodier than holographic foil.
How it works
Oil Slick is an animated metallic & holographic text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Oil Slick exposes 2 dedicated controls — Base Hue and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Oil Slick — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Unbounded', sans-serif (load from Google Fonts).
*/
@property --text-effect-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.text-effect {
font-family: 'Unbounded', sans-serif;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
--text-effect-angle: 0deg;
background: linear-gradient(115deg, transparent 30%, hsl(0 0% 100% / 0.18) 50%, transparent 70%), conic-gradient(from var(--text-effect-angle), hsl(233 85% 42%), hsl(293 90% 50%), hsl(23 85% 44%), hsl(113 90% 48%), hsl(183 88% 46%), hsl(233 85% 42%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 10px hsl(23 80% 55% / 0.35));
animation: text-effect-slick 7.2s linear infinite;
}
@keyframes text-effect-slick {
to { --text-effect-angle: 360deg; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Metallic & Holographic
- Type
- Animated
- Browser support
- background-clip:text + animated @property <angle> conic iridescence
- Capabilities
- property