Glass Pill
Metallic & Holographic · Static · pure CSS
The word set in a frosted glassmorphism chip: a translucent panel with a hairline border, inset highlight and backdrop blur. The modern changelog-badge treatment.
How it works
Glass Pill is a static metallic & holographic text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Glass Pill exposes 2 dedicated controls — Tint Hue and Frost — 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
/* Glass Pill — 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: 700;
letter-spacing: 8px;
text-transform: none;
}
.text-effect {
display: inline-block;
padding: 0.3em 0.72em;
border-radius: 0.55em;
color: hsl(347 18% 94%);
background: linear-gradient(180deg, hsl(347 30% 100% / 0.1), hsl(347 30% 100% / 0.03));
border: 1px solid hsl(347 40% 100% / 0.2);
box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.16), 0 10px 30px hsl(347 40% 4% / 0.4);
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Metallic & Holographic
- Type
- Static
- Browser support
- Translucent chip with backdrop-filter blur (frosts whatever is behind it)
- Capabilities
- pure