Flowing Stroke
Outline & Stroke · Animated · pure CSS
Hollow letters whose outline itself comes alive: a multi-hue conic gradient is clipped to the text and rotated forever through a transparent stroke, so a neon current circulates continuously around the glyph edges. Unlike a static gradient stroke, the colour never stops moving — a duo-hue-to-rainbow band flows around the letterforms while a page-matching fill keeps the centres clean.
How it works
Flowing Stroke is an animated outline & stroke text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Flowing Stroke exposes 4 dedicated controls — Hue, Hue Span, Flow and Stroke — 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
/* Flowing Stroke — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
@property --text-effect-flow {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 400;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
--text-effect-flow: 0deg;
background: conic-gradient(from var(--text-effect-flow) at 50% 50%, hsl(161 90% 62%), hsl(251 90% 62%), hsl(341 90% 62%), hsl(251 90% 62%), hsl(161 90% 62%));
-webkit-background-clip: text;
background-clip: text;
color: #0a0a0a;
-webkit-text-fill-color: #0a0a0a;
-webkit-text-stroke: 6.0px transparent;
filter: drop-shadow(0 0 3px hsl(251 90% 60% / 0.35)) drop-shadow(0 0 8px hsl(251 90% 60% / 0.35));
animation: text-effect-current 7.6s linear infinite;
}
@keyframes text-effect-current {
to { --text-effect-flow: 360deg; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Outline & Stroke
- Type
- Animated
- Browser support
- -webkit-text-stroke + background-clip:text + animated @property <angle> (Chromium/WebKit)
- Capabilities
- property