Radar Sweep
Gradient Fill · Animated · pure CSS
A dim, still-legible word sits behind a single bright conic beam that spins around its centre using an animated @property angle, lighting each letter as the sweep passes and leaving a decaying afterglow trail. Radar-green by default with amber and blue phosphor variants plus optional faint concentric scope rings — a sonar scanner clipped to your text.
How it works
Radar Sweep is an animated gradient fill text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.
Controls
Radar Sweep exposes 4 dedicated controls — Hue, Sweep Speed, Trail Length and Scope Rings — 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
/* Radar Sweep — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Recursive', sans-serif (load from Google Fonts).
*/
@property --text-effect-ang {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.text-effect {
font-family: 'Recursive', sans-serif;
font-weight: 400;
letter-spacing: 0px;
text-transform: uppercase;
}
.text-effect {
--text-effect-ang: 0deg;
background: conic-gradient(from var(--text-effect-ang), transparent 0deg, transparent 202deg, hsl(145 85% 58% / 0.35) 281deg, hsl(145 92% 64% / 0.8) 336.3deg, hsl(145 96% 70%) 360deg), repeating-radial-gradient(circle at 50% 50%, hsl(145 32% 60% / 0.42) 0px, hsl(145 32% 60% / 0.42) 5px, hsl(145 28% 46% / 0.5) 5px, hsl(145 28% 46% / 0.5) 9px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 5px hsl(145 90% 55% / 0.35));
animation: text-effect-sweep 5.0s linear infinite;
}
@keyframes text-effect-sweep {
to { --text-effect-ang: 360deg; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Gradient Fill
- Type
- Animated
- Browser support
- background-clip:text + animated @property <angle> (conic sweep)
- Capabilities
- pure, property