HUD Targeting
Retro & Themed · Animated · pure CSS
Four L-shaped corner brackets lock onto the word like a fighter-jet targeting reticle, while a bright scan-line sweeps down through the glyphs on a loop and a dashed data-readout strip ticks along under the baseline. A steady cyan/green glow holds the text itself rock-solid — this is HUD chrome built around the word, not a flicker on the letters.
How it works
HUD Targeting is an animated retro & themed text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
HUD Targeting exposes 4 dedicated controls — Hue, Bracket Size, Inset and Scan 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
/* HUD Targeting — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
padding: 0.20em 0.30em 0.60em;
color: hsl(192 60% 74%);
text-shadow: 0 0 2px hsl(192 60% 74%), 0 0 7px hsl(192 85% 60% / 0.55);
background-image: repeating-linear-gradient(90deg, hsl(192 70% 58% / 0.75) 0 2px, transparent 2px 7px);
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: left bottom;
}
.text-effect::before {
content: "";
position: absolute;
inset: 0 0 0.4em 0;
pointer-events: none;
background-image: linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%)), linear-gradient(hsl(192 85% 64%), hsl(192 85% 64%));
background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
background-size: 0.58em 2px, 2px 0.58em, 0.58em 2px, 2px 0.58em, 0.58em 2px, 2px 0.58em, 0.58em 2px, 2px 0.58em;
background-repeat: no-repeat;
}
.text-effect::after {
content: "";
position: absolute;
inset: 0 0 0.4em 0;
pointer-events: none;
mix-blend-mode: screen;
background-image: linear-gradient(to bottom, transparent 0%, hsl(192 45% 92% / 0.55) 45%, hsl(192 45% 92% / 0.55) 55%, transparent 100%);
background-size: 100% 0.85em;
background-repeat: no-repeat;
background-position: 0 -1.2em;
animation: text-effect-scan 3.7s linear infinite;
}
@keyframes text-effect-scan {
0% { background-position: 0 -1.2em; }
100% { background-position: 0 calc(100% + 1.2em); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Animated
- Browser support
- Multi-layer background corner brackets + scanning gradient bar (mix-blend-mode: screen); all modern browsers
- Capabilities
- pure