CodeKitHubWhat Is This Tool?
This tool combines a light-colored and dark-colored text-shadow, offset in opposite directions, to create the illusion of raised (embossed) or carved (engraved) text.
Switch between Embossed and Engraved styles, and adjust the intensity slider to control how strong the 3D effect looks.
A live preview updates instantly as you type or adjust any setting, so you can fine-tune the effect before copying the CSS.
Why Use It?
- You're building a retro Windows 95 or skeuomorphic UI theme and need that classic "pressed into gray plastic" label look without hand-tuning shadow offsets in dev tools.
- You're designing a badge or achievement icon and want the text to look stamped or engraved into a metal-like background rather than sitting flat on top of it.
- A designer handed you a mockup with an embossed heading and no CSS — recreate the effect here instead of guessing at shadow values by trial and error.
- You want an old-school "carved in stone" or letterpress look for a logo or hero heading without reaching for an image editor or SVG filter.
- You're prototyping several intensity levels side by side to see how subtle versus dramatic the 3D effect should be before locking in a final design.
- 100% local: the CSS is generated entirely in your browser, with nothing sent to a server.
How to Use
- Type the text you want to style.
- Choose Embossed (raised) or Engraved (carved) from the style selector.
- Adjust the intensity slider and pick a background and text color that match your design.
- Click "Copy" to copy the generated CSS code and paste it into your stylesheet.
Example
Input
Text: "Embossed", Style: Embossed, Intensity: 2Output
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);The generated CSS sets the text color, background color, and a two-layer text-shadow that creates the raised or carved effect.
How the effect works
The embossed and engraved effects are built from two offset text-shadow layers with opposite light and dark colors.
| Property | Purpose |
|---|---|
| Light shadow (rgba(255,255,255,0.7)) | Simulates a light source catching one edge of the text |
| Dark shadow (rgba(0,0,0,0.5)) | Simulates a shadow falling on the opposite edge |
| Offset direction | Reversed between Embossed and Engraved to flip the 3D illusion |
| Intensity | Controls how far the light and dark shadows are offset from the text |
| Matching colors | Text and background color set close together to hide flat contrast |
Where embossed and engraved text works best
- Section headings and labels on a flat-color card or panel, where the subtle 3D effect adds texture without competing with body content.
- Badges, seals, and achievement icons, where a stamped or carved look reinforces the sense of something official or earned.
- Retro or skeuomorphic UI themes (old-school OS chrome, embossed buttons) where the effect is part of the design language rather than a one-off accent.
- Avoid it on small body text or long paragraphs — the effect relies on close text/background color matching, which hurts plain readability at small sizes.
Related tools
For more CSS generators, try these.
→ CSS Glassmorphism Generator · Box Shadow Generator · Border Radius Generator
Frequently Asked Questions
What's the difference between Embossed and Engraved?
Embossed makes the text look raised out of the background, with the light shadow on the top-left and dark shadow on the bottom-right. Engraved reverses this, making the text look carved into the background instead.
Why does the effect look best with a matching text and background color?
The embossed/engraved illusion relies entirely on the shadow highlights and shadows, not on text-to-background contrast — so setting the text color close to (or the same as) the background color usually gives the cleanest result.
Can I use this effect on any element, not just text?
The text-shadow property this tool generates only applies to text. For a similar effect on shapes or buttons, you'd need a comparable box-shadow setup instead.
Does this tool save or track what I type?
No. The CSS is generated entirely in your browser — nothing is sent to or stored on a server.
Will this work in all browsers?
Yes — text-shadow has excellent support across all modern browsers, including Chrome, Firefox, Safari, and Edge.
Why does the embossed effect disappear or look wrong on a dark background?
The light shadow layer relies on standing out against a lighter surface — on a very dark background, the white highlight can wash out or look inverted from what you'd expect. Try switching text and background to a mid-tone gray, or increase the light shadow's opacity, to keep the 3D illusion readable on darker themes.
Can I animate or transition the embossed effect on hover?
Yes — text-shadow is animatable with a CSS transition, so you can smoothly shift from a flat state to embossed (or between Embossed and Engraved intensities) on :hover or :focus. Copy the generated shadow value as your "hover" state and pair it with a transition: text-shadow 0.2s ease; rule on the base element.
Does the intensity slider affect performance on large amounts of text?
No — text-shadow is a lightweight CSS property regardless of intensity, since it's just two shadow layers computed the same way whether the offset is 1px or 6px. It's safe to use on headings, buttons, or body text without a rendering performance concern.
How do I make the effect look good with a custom font instead of the default?
The emboss/engrave illusion tends to read most clearly on bold, thick-stroke fonts, since there's more surface area for the shadow offset to catch light and shadow. Thin or light-weight fonts can make the effect look faint or noisy — if your custom font looks unclear, try a heavier font-weight or bump up the intensity slightly to compensate.
Can I use two different colors instead of white/black for the light and dark shadows?
The generated CSS is a starting point you're free to edit — swap the rgba(255,255,255,...) and rgba(0,0,0,...) values for any color pair once you've copied the code, for example a warm gold highlight and a deep brown shadow for a bronze-plaque look instead of the default gray metal effect.