Shadcn.io is not affiliated with official shadcn/ui
Gloss Text
Glossy 3D plastic typography with a cursor-driven specular highlight that tracks across the letters in real time for React applications.
Gloss Text preview
Type that looks like polished candy or wet plastic — vivid base color, a bright sheen across the upper half, a softer reflection on the lower curve, and a focused specular highlight that follows the cursor as if the letters were a real reflective surface. Move the pointer over the text and the bright spot tracks with it; move away and the highlight returns to its resting position. Built with three stacked layers all clipped to the glyph outlines via background-clip, with a soft drop-shadow underneath for a 3D pop. Different from chrome (mirror metallic), foil (full iridescent rainbow), and shimmering (color cycling) — gloss is monochromatic, bouncy, and tactile. Perfect for retro Y2K heroes, lifestyle and consumer-product marketing, playful CTAs, and any surface that wants type that feels touchable.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the gloss-text text effect into my projectRelated Components
Chrome Text
Polished metallic chrome reflectance
Foil Text
Iridescent foil with cursor-driven hue
Shimmering Text
Wave-like color shimmer across text
Gradient Text
Animated gradient sweeping through letters
Neon Text
Authentic neon-sign glow with flicker
Dot Matrix Text
Pixel-style dot matrix typography
FAQ
Was this page helpful?
Sign in to leave feedback.