Shadcn.io is not affiliated with official shadcn/ui
Emboss Text
Subtle 3D embossed or debossed typography that appears physically pressed into the surface, with depth, tone, and automatic light-and-dark-mode polarity for React, Next.js, motion, and Tailwind CSS.
Emboss Text preview
Type that lives on the surface instead of on top of it. The effect is built from a pair of opposing text-shadows — a soft highlight from above and a deeper shadow from below — and the glyph fill is set to match the parent surface color, so the letters appear carved out of the page rather than placed on it. Switch between embossed (raised) and debossed (pressed in) by flipping the shadow polarity, scale the relief with the depth multiplier, and tint the highlight + shadow toward warm, cool, or neutral. Critically, the polarity automatically inverts in dark mode via Tailwind's dark: variants, so the effect reads as "light from above" on both light and dark surfaces without any prop changes. Drop it on premium label copy, section eyebrows, dial markers, or anywhere you want typography to feel pressed into a real material.
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 emboss-text text effect into my projectRelated Components
Stamp Text
Letters that stamp in like rubber stamps with overshoot
Line Shadow Text
Diagonal line-pattern shadow for graphic depth
Neon Text
Authentic neon-sign glow and flicker
Chromatic Text
RGB channel separation aesthetic
Paper Fold Text
Origami-style unfold reveal animation
LCD Text
Segmented seven-segment LCD aesthetic
FAQ
Was this page helpful?
Sign in to leave feedback.
Elastic Text
Drag a letter and watch it stretch the word like a spring chain, with neighbors following at a geometric falloff and a damped snap-back on release.
Erase Text
Cursor-driven text eraser that fades each glyph toward transparency as the pointer sweeps over it and slowly restores the letter once the cursor has left, built with React, Next.js, motion, and TypeScript for production interactive typography.