Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Pro

Emboss Text for React

Text raised from the surface or pressed into it, with a lit edge and a soft shadow. For React with Base UI, when a label should feel stamped into the page.

Framework

Emboss Text makes a word look as if it were part of the surface: raised from it, or pressed into it. The letters take a faded shade of the text's colour, close to the surface they're cut from, with a crisp lit edge on one side and a soft shadow on the other, as if lit from above. It doesn't move; it's the one finish here that's only light and shade.

Use it for a quiet headline or a label on a card or a panel: a product name, a section eyebrow, a serial number, a premium edition. For a printed hatched shadow, use Line Shadow Text; for polished metal, Chrome Text. It's CSS only: a utility the install adds to your stylesheet draws both edges as a static text shadow. The light and shade are brighter in dark mode, so the relief reads in either theme.

Preview width

Handcrafted

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { EmbossText } from "@/components/ui/emboss-text";
<h2>
  <EmbossText text="Handcrafted" />
</h2>

Demos

Mode

mode is which way the letters go: embossed, the default, raises them, with the lit edge above and the shadow below; debossed presses them in, with the shadow above and the lit edge below.

Preview width

Intensity

intensity is how deep the relief is: subtle, medium by default, or strong. The depth grows with the text's size and is never less than a pixel.

Preview width

Accessibility

The text is plain text, read and selected as usual. The letters are quieter than plain text by design, at half the text's colour: use it for a headline or a large label, never for body copy. In forced-colors mode the shadows are removed and the text takes the system's text colour.

FAQ

On what background does it look best?

A surface a little darker than white, such as a muted panel or a card on a tinted page: the lit edge needs something to be lighter than. On pure white it reads as raised by its shadow alone.

How do I tint it?

Set a text colour on it or around it, such as text-primary on the component: the letters fade from that colour, so the relief takes its hue.

Is it readable enough?

At a headline's size, yes: the letters are at half the text's colour, and the edges outline them. Keep it for large text; at body size the relief disappears and the faded letters lose contrast.

How does it work in dark mode?

The same light falls from above, but the lit edge is a faint white and the shadow a deep black, so the relief reads on a dark surface without any prop.

Can I change the light and the shadow?

Yes: set --emboss-text-light and --emboss-text-shade to any CSS colours on the component, such as a warm cream and a brown for leather.

Does it move?

No. It's a static finish, so there's nothing to turn off for reduced motion.

API Reference

EmbossText

<span> data-slot="emboss-text"

PropType
textstring

The text.

intensity?"subtle" | "medium" | "strong"

How deep the relief is: subtle, medium, or strong for a headline's deep press.

Type
"subtle" | "medium" | "strong"
Default
"medium"
mode?"embossed" | "debossed"

Raised from the surface (embossed), or pressed into it (debossed).

Type
"embossed" | "debossed"
Default
"embossed"
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--emboss-text-lightstring

The lit edge's colour.

--emboss-text-shadestring

The shadow's colour.

All 97 text effects