Creating a True Inset Text Effect Using CSS3

Posted on April 27, 2011 by Gordon Hall

So, I have seen a few tutorials online about using text-shadow to create a basic inset text effect, but they are all lacking the real design aspect that makes the type look like it is actually INSET. That aspect is the inner shadow.

NOTE: This method is currently only supported by Webkit browser like Google Chrome and Apple Safari.

I played around with trying to hack box-shadow into background-image in the same way that you can add linear gradients to text, but to no avail.

Well, in any case, I finally was able to get something to work, and yes, it is pretty killer.

That’s it right there. But, let’s take a look at how and why this works.

First let’s start with defining our class and setting our font. We have styled our div and our body and now we want this text to look like it is stamped into to page.

.insetText {
        font-family: Lucida Grande;
}

The next step we want to take is to set the background-color of the text to the color that we want the inset to be. So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
}

Next, we are going to use the background-clip CSS3 property to create a clipping mask using the text to mask the background. Now if you are a designer, you probably already know how a clipping mask works. The color black is transparent to the background and the color white is opaque. Thus, the image behind the mask will show through on only the black parts and the white parts will ‘clip’ it. Remember that, because it’s important.

Remember, CSS3 is not standard yet and may not be supported in older browsers. For now, it’s best to use the standard AND browser specific properties for any CSS3, so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}

Now, I know. It doesn’t look like that did anything, whatsoever. We are back where we started, right? Wrong, in truth, the background color has been clipped behind the text, so it only shows through where the text is. The problem is that the browser default CSS is to make text black. So, now we simply use color to make the text transparent.

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
}

Now we’re getting somewhere. We have taken transparent text and used it to clip it’s grey background. Here is where the magic happens. We will use the text-shadow property with rgba colors. Since the text is transparent, the entire shadow, even what is normally hidden by the text in front of it, will show. If we offset the shadow vertically, it will appear as if it is on the inside of the text. And if we blur the edges, it should actually appear like an inset shadow, since the darker clipped background fading into the white shadow right? And the shadow that falls outside of the clipping mask should appear to glow slightly, since that it’s closer in color to the contrasting background! So…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,1.0) 0px 3px 3px;
}

Yeah, that looks pretty good, right? I just don’t like how the inside of the text in now white. It looks kind of unnatural, and it really takes away from the outer glow that gives it the inset look. So let’s revise our shadow color by dropping it’s opacity or ‘a’ value to 0.5. Like so…

.insetText {
        font-family: Lucida Grande;
        background-color: #666666;
        -webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Perfect! Now we have a completely CSS based inset text effect! We can now add this class to any text element on our websites, without having to open Photoshop or Illustrator, create the document, design the effect, save the image, upload the image, and then place the image in our markup where it will slow down our load time. You would add this to your markup like so…

<h1 class="insetText">This is inset text</h1>

This solution is great for headings. The smaller you make your text the smaller you will need to make your text-shadow.

Thanks for reading, and I hope this helped!

Check out the demo by clicking here!

40 thoughts on “Creating a True Inset Text Effect Using CSS3”

James on April 30, 2012 at 1:51 am said:

This is exactly what I needed, and a really clever approach to it. You are awesome.
Pingback: 20个最佳CSS3文字效果教程 | html5学习网 html5资讯 html5教程
Pingback: Painless Techniques to Implement CSS3 Latest Tricks « CSS Tips
Pingback: 5 Great HTML5 & CSS3 Tutorials | Affordable Web Design - $699 from Affordable Web Design Biz
Pingback: Web Resources | Pearltrees
Mike M. on February 23, 2012 at 5:21 am said:

Just a heads up that to aid with cross-browser compatibility, I tried to emulate the effect using just text-shadow. It’s not AS beautiful, but looks great and works in Chrome, Safari, and Firefox (and just shows up as black in IE.)

CSS is:
color: rgba(0,0,0,0.5);
text-shadow: 2px 2px 3px rgba(255,255,255,0.8),
0px 0px 1px rgba(0,0,0,.7);
Pingback: 16 Must-Read Tutorials for New HTML5/CSS3 Techniques « CSS Tips
Jack Jones on February 1, 2012 at 1:42 pm said:

Very nice!
Pingback: 20个值得收藏的CSS3文字效果教程 | Web开发之道
Mecha on January 28, 2012 at 4:21 am said:

@Leah I can only get this to work in Chrome. How did you get it in those other browsers?
Faruk Ateş on January 28, 2012 at 4:18 am said:

For dealing with other browsers, this Modernizr.backgroundcliptext test makes it easy to offer a fallback for when the `text` value isn’t supported: https://github.com/Modernizr/Modernizr/commit/18702bee338814e018a493d020e413663f212c1a
Pingback: 12 эффектов для текста с использованием теней CSS | div верстка,уроки верстки,html верстка
Pingback: 20个最佳CSS3文字效果教程|CSS3|开发技术|代码狂人
Pingback: 10 Nouveau CSS3 Text Effect and Web Typography Tutorials | jQuery4u
Leah on January 3, 2012 at 5:59 pm said:

I looked at this page in IE9, Safri, Waterfox, Chrome and Opera. I thought it looked fine in all of them. Very cool. Thanks.
Serj on December 9, 2011 at 9:31 am said:

This looks beautiful in Google Chrome, but horrible in IE and Firefox… too bad… I got really excited until I see it in the other browsers.. thanks for showing what is possible..
Pingback: E-sitesweb » 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
Randy on November 26, 2011 at 10:09 pm said:

anyone know when this will be compatible with firefox? Is it that hard for firefox to make this compatible? I’m working on a web page now and would love to use this but everyone I know is currently using Firefox. Thanks for the tutorial! this one is really good!
Jhn Design on September 20, 2011 at 4:09 am said:

This is the best inset effect result I’ve seen so far, too bad it’s only working with Chrome and Safari. Great tutorial and result !
Pingback: 23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence | Bitmag
MoShotz on August 13, 2011 at 11:05 pm said:

This is the most incredible CSS3 inset text method I’ve seen so far, and I’d love to use it on my site. Has anyone found a way to make it look this good in browsers that don’t support background-clip:text?
Majalah on July 2, 2011 at 12:31 pm said:

What the most I like about css3 is the text-shadow. It can make web typography looks beautiful without more works on additional image.
Dale M. Rollinson on July 2, 2011 at 2:47 am said:

As the demo shows, it’s an easy and professional effect to apply to paragraphs and headings associated with a div containing the background color.

But…
I’m having great difficulty incorporating this into navigation links.

The solution will involve applying the link background color to the ‘a’, then the effect class ‘.inset’ applied using a tag across the link.

However, the necessity of defining the style for “a:link” creates a conflict, which overwrites the effect. Any ideas?
Theo B on June 22, 2011 at 2:01 pm said:

Great technique !!!
I was searching just it!
The technique with multiple text-shadow doesn’t let the real inset…

I’m brazilian, then sorry my english…
web tasarım izmir on June 21, 2011 at 4:31 pm said:

thanks for the nice post, I will visit your blog ,thanks for kind efforts and nice sharing
Pingback: 12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack
Carlene on June 3, 2011 at 5:55 am said:

Hello! While this looks great it just looks terrible in Firefox. Has anyone found something that looks good in all current browsers? I don’t care if the effect doesn’t show up – it just can’t look as horrible as the above effect appears in Firefox.
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Revo2.0 Mkt
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | vsagrafica.com
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Layers & Tags
Gordon Hall on May 24, 2011 at 11:51 pm said:

Hi Divya, yes unfortunately Webkit is the only engine that supports this property. But nevertheless, a fun experiment!
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | General Zone
Divya on May 23, 2011 at 5:34 am said:

Just to note, ‘text’ is not a valid value for background-clip property, so is unlikely to be implemented across all browsers.
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Free Web Design Tucson
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials « jembling.com
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
Gordon Hall on May 13, 2011 at 5:00 am said:

Hi, Collin. No need for apologies. I do agree that this method maybe slightly over complicated, however, the reason I believe this method to be solid, is that, since the background-clip property is being used, you could take this, and instead of setting a background color, you could set a background image or gradient. That could, if done right, render a really nice looking header with pure CSS and maybe @font-face. Just an experiment! Glad you enjoyed the read enough to comment!
Collin on May 8, 2011 at 11:45 am said:

However something like this would work I think:
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
Collin on May 8, 2011 at 11:44 am said:

And as i just wrote that i realized you can’t box-shadow text LOL. My apologies.
Collin on May 8, 2011 at 11:42 am said:

You have over-complicated the idea of an inner shadow. It is possible to do it with box-shadow

-webkit-box-shadow: inner 0 2px 2px rgba(0,0,0,0.85);

Gordon Landry Hall

Interface Engineer

Creating a True Inset Text Effect Using CSS3

40 thoughts on “Creating a True Inset Text Effect Using CSS3”

Leave a Reply Cancel reply