Mirror Reflection
Interactive & Advanced · Static · pure CSS
Text with a faded mirror reflection below via -webkit-box-reflect and a gradient mask. A glossy, modern sheen.
CSS
/* Mirror Reflection — generated with TEXT-FX
* 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: 400;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
background: linear-gradient(180deg, hsl(251 90% 78%), hsl(251 95% 52%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 10px hsl(251 100% 60%)) drop-shadow(0 0 26px hsl(251 100% 60%));
-webkit-box-reflect: below 13px linear-gradient(transparent 30%, rgba(0,0,0,0.60));
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Interactive & Advanced
- Type
- Static
- Browser support
- -webkit-box-reflect (Chrome/Safari/Edge; reflection silently omitted in Firefox) + background-clip:text.
- Capabilities
- pure