Shadcn.io is not affiliated with official shadcn/ui
Chrome Text
Polished metallic chrome finish on text with a vertical reflectance gradient and a slow-traversing shimmer band, with polished, brushed, and blackened variants for React, Next.js, motion, and Tailwind CSS.
Chrome Text preview
The classic chrome bar reflectance, painted directly into your typography. A vertical gradient runs light at the top, dims through a dark midband, and brightens again at the bottom — exactly the way a curved chrome bumper picks up the sky above and the ground below. On top of that, a narrow specular highlight band drifts slowly across the glyphs, catching each letter as it passes like a moving studio light. Three variants ship in: polished gives the mirror-finish silver you'd see on a luxury watch dial, brushed adds a horizontal grain via repeating-linear-gradient for a machined-aluminium feel, and blackened inverts the palette into gunmetal with bright highlights — useful when the polished variant disappears against light surfaces. Built with Motion's useTime + useTransform so the shimmer animates on the GPU without triggering React renders. Drop it on premium SaaS heroes, awards pages, agency portfolios, or anywhere you want type that feels expensive.
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 chrome-text text effect into my projectRelated Components
Gradient Text
Animated gradient sweeping through letters
Shimmering Text
Wave-like color shimmer across text
Line Shadow Text
Diagonal line-pattern shadow for depth
Neon Text
Authentic neon-sign glow with flicker and buzz
Chromatic Text
RGB channel separation aesthetic
Stamp Text
Letters that stamp in like rubber stamps
FAQ
Was this page helpful?
Sign in to leave feedback.
Chromatic Text
RGB chromatic aberration that smoothly separates the red and blue color channels in response to cursor proximity, with spring-eased offsets and an idle breathing mode for React, Next.js, and motion.
Circular Text
Text arranged in a rotating circle with hover interactions for React applications.