Hover Glint
Interactive & Advanced · Static · pure CSS
A bright diagonal highlight sweeps across the word on hover, like light catching glass. CSS-only, no JavaScript; the resting state is clean.
How it works
Hover Glint is a static interactive & advanced text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Hover Glint exposes 2 dedicated controls — Hue and Sweep — 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
/* Hover Glint — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Syne', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
position: relative;
overflow: hidden;
color: hsl(237 35% 84%);
cursor: pointer;
}
.text-effect::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(115deg, transparent 0%, hsl(0 0% 100% / 0.7) 50%, transparent 100%);
transform: skewX(-18deg);
transition: left 0.72s ease;
pointer-events: none;
}
.text-effect:hover::before {
left: 125%;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Interactive & Advanced
- Type
- Static
- Browser support
- Glint sweeps on :hover via an overflow-clipped ::before bar — static preview is clean.
- Capabilities
- pure