simurai avatar

simurai

UI Designer and CSS Doodler

Carve Me

Unfortunately, there is no inset text-shadow. But you can kinda simulate it.

See the Pen Carve Me by simurai (@simurai) on CodePen.

(hover to see the effect)

.inset {
    color: transparent;
    background-color: rgba(82,96,117,0.5);
    -webkit-background-clip: text;
    text-shadow: rgba(255,255,255,0.5) 0 5px 6px;
}
  1. First we set the text color to transparent.
  2. Then we add a dark background-color.
  3. Then by adding background-clip: text it only shows the background within the outline of the text. It’s like a mask. Note, this is not a standard feature and only implemented in Chrome/Safari.
  4. And finally, if we add a bright, half transparent text-shadow on top and push it down a bit so that the dark background can be seen, it makes it look like the text is carved into the surface.

Note that it doesn’t work well on all backgrounds and you might have to adjust the colors. Also, it’s not easy to add a fallback, so make sure you use Modernizr.

Edit this page, leave feedback or send a Tweet.