How to Create Inset Typography with CSS3

Mar 21 2010 by Andrew Roberts | 45 Comments

Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: "Jacob already wrote a Photoshop tutorial on how to do that."

That is correct, but this time we are going to do it using only CSS.

I set out to recreate the How to Create Inset Typography in Photoshop tutorial, and after experimenting with some fresh and new CSS3 properties, I was able to make a similar type treatment.

We’ll do all of this in less than ten lines of CSS.

Step 1: The HTML markup

Let’s first set up the HTML, which is super simple. The typography will be an h1 element, wrapped around a div for its background.

<div id="insetBgd">
	<h1 class="insetType">Inset Typography</h1>
</div>

Step 2: The background

The first bit of CSS we want to do is the background. We are going to create it similar to the background in the Photoshop tutorial mentioned above. We’ll set the width to 550px and height to 100px.

Next, we are going to use CSS3 gradients. If you’ve never used the required browser extensions for CSS3, hop on over to my previous article called CSS3 techniques you should know first, to catch up.

We want the background to have a gradient going top to bottom, from #003471 to #448CCB.

The code to do this is:

#insetBgd {
 width: 550px;
 height: 100px;
 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

22-02_css_background

Step 3: Define the font stack and styles

Next, we want to define our preferred font. The Photoshop tutorial used Rockwell STD, but we are going to just use the normal Rockwell. Neither are considered acceptable web-safe fonts, but more users will have the plain, old Rockwell than the Rockwell STD variant.

However, in case the user doesn’t have Rockwell, we’ll define a few web-safe fonts to render in its place.

In the example, I set the font-size to 50px, and the font color to #0D4383. Here’s what we have:

h1.insetType {
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  color: #0D4383;
}

Define Font stack

Step 4: The inset styles

The next and final step is the most important part. We’ll style the font and give it the “inset” look we’re trying to achieve. We’ll do this by using the text-shadow style.

You’ll notice Jacob used “inner shadow” in Photoshop to get this effect. Unfortunately for us, text-shadow doesn’t have an “inset” value. So what we’ll have to do is create multiple instances of RGBA black and white 1px shadows, some being negative pixels, as well as adding different levels of opacity to each.

I messed around with a bunch of different variations, and settled on this:

  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;

Add the text-shadow style to the h1.insetType class above, and our final CSS code looks like the following:

#insetBgd {
  width: 550px;
  height: 100px;
  background: -moz-linear-gradient(-90deg,#003471,#448CCB);
  background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

h1.insetType {
  padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
  padding-top: 17px;
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  color: #0D4383;
  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;
}

CSS3 Inset Typography Demo:

Below, you’ll see the final result. Note that you’ll only be able to see it if your browser supports current CSS3 specs for the attributes that we used in this tutorial.

What It Looks like in Firefox 3.6 (without Rockwell)

Below is a screen shot of what this effect should look like, taken through a Windows OS machine, Firefox 3.6 and without Rockwell installed.

Your browser does not support iframes, you will not be able to view this demo.

Conclusion

So there you have it. Pretty simple, right? It may not look quite as good as it would in Photoshop, but it will take up less load time, it’s more flexible than a static image, and it’s all done without any special software.

I want to give credit to StylizedWeb for giving me an idea of how to go about doing this. Thanks for reading!

Related Content

About the Author

Andrew Roberts is a Christian with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical studies & ministry.

45 Comments

Soam

March 21st, 2010

Not working.
Just tried.

Jacob Gube

March 21st, 2010

@Soam: It won’t work on some web browsers. For example, if you are using Firefox 3.5 and below, you won’t see the gradient background as (I think, correct me if I’m wrong), they only implemented gradients in 3.6+

I’ve tested this to work perfectly on Google Chrome and Safari (Webkit layout rendering engine), Firefox 3.6.

axel

March 21st, 2010

good tutorial, thanks…
and not working on all old browsers and IE

DxDesigns

March 21st, 2010

Great tutorial, have seen this effect being used on websites without having to use an image and have been wondering how to achieve the effect. Thanks!

Josh

March 21st, 2010

Thanks for this! definitely a more flexible way to do this than PS!

David Millar

March 21st, 2010

It looks OK, but sometimes a much simpler approach can be used for the effect – simply adding a light/white (try rgba(255,255,0.7) “shadow” 1 pixel below the text often works, especially for smaller text.

Good info nonetheless.

Jordan

March 21st, 2010

This is the main reason why I have rarely needed to boot up Photoshop. Anything that I would have done in PS, I can now do with CSS3. I was especially happy with being able to do a psuedo-letterpress with just CSS3.

Creative Nuts

March 21st, 2010

great css3 tick :)

andrew

March 21st, 2010

@axel and @soam
It’s called progressive enhancement. people who see it in older version of Firefox or any IE will see perfectly readable text on a nice colored background (although there are ways to make gradients and hard drop shadows work in IE). And that’s fine, as long as you make it clear to your boss/client that it won’t look exactly the same in every browser.

That’s how my last few full time jobs have been: we use box-shadows, text-shadows and border-radius on all of our sites. We will be implementing css gradients on our site in a few weeks to replace all of the gradient pngs.

Billy

March 21st, 2010

It looks great, but with the white border on each letter, it makes it kind of look outset.

ardianzzz

March 21st, 2010

so simple trick! nice, thank you

Andrew Roberts

March 21st, 2010

@Billy: Yeah, it just depends on how one looks at it. To me it’s like one of those illusions where you can see two completely different things. You’ll notice I said, “text-shadow doesn’t have an “inset” value”..If we had that option available, this technique could look a bit better. But, we work with what we have :)

Amos Newcombe

March 22nd, 2010

I too see it as outset. Normally my eyes assume light comes from the upper right, but here the gradient makes it clear light is coming from below, thus the letters pop out of the page, not sink into it.

guci0

March 22nd, 2010

@Andrew – Hmmm… Nice and easy
trick! Best regards!

FVG

March 22nd, 2010

thanks for the wonderful tutorial but i dont think it will work on firefox. I tried but it is not working for me. It works fine on Google Chrome :)

Turing's Nightmare

March 22nd, 2010

Very clever. Thanks.

Works for me on FF 3.6
Anyone try it on the IE9 platform preview yet?

Jordan Walker

March 22nd, 2010

This has to be close to my favorite CSS3 feature for typography.

Cameron Baney

March 22nd, 2010

Flip the gradient so the light source is coming from the top, and it will look a lot better

Jenna Molby

March 22nd, 2010

Nice trick, thank you!

Beth McLain

March 22nd, 2010

Nice share… Its the latest trend i have noticed. Thanks for sharing..

Andrew Roberts

March 22nd, 2010

@FVG: Download Firefox 3.6

richard hughes

March 23rd, 2010

until this is supported by all browsers i would fire up photoshop for this and use an image.

looks much much better also.

JayDesign

March 24th, 2010

@Cameron, i was wondering the same… it will look definitely prettier. lack of details is evil :-)

Andrew Roberts

March 24th, 2010

@Cameron and @JayDesign: I flipped the gradient and compared them. It’s really just a matter of opinion and how you look at it. Neither one looks better than the other when you look at them side by side.

rasmusfl0e

March 24th, 2010

Why not combine the background gradient into the h1-tag itself and save the div and id for something else?

rasmusfl0e

March 24th, 2010

Doing away with the div and id, and using text-align and line-height (the second unit in the font shorthand) makes for a simpler solution:

h1.insetType {
width: 550px;
height: 100px;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
font: 50px/100px Rockwell, Georgia, “Times New Roman”, Times, serif;
text-align: center;
color: #0D4383;
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;
}

Andrew Roberts

March 25th, 2010

@rasmusfl0e: Good call man

Kenneth Glenn

April 15th, 2010

Very cool, learn some new tricks everyday.

david

May 13th, 2010

I agree this looks more like an outset effect. To produce an inset style (on white letters) I just use :

text-shadow:black -1px -1px;

Hiphop

May 17th, 2010

Very good resources on CSS3. However, I would wait until it is finalized and all browsers fully support it. Though the learning curve can be shorted by learning it ahead of time of course.

Animas

June 8th, 2010

I agree this looks more like an outset effect. To produce an inset style (on white letters) I just use :

text-shadow:black -1px -1px;

smooth booth

July 16th, 2010

hey, im a newcomer to your site… quality posts and tips. just been catching up on a few archived. My css3 knowlegde is not up to much at the moment so this has helped. Thank You.

seb

September 3rd, 2010

I love that ! Thanks, merci beaucoup.

Gemma

September 4th, 2010

This is not inset typography. To have the type look as though it’s inset, the shadow (on the top-left) must be inside the letters i.e. an inner shadow. So you’re better off doing larger typography for headers or display with Photoshop or a similar image editing application. But you could probably get away with using CSS3 alone for body text or smaller to achieve the same effect.

CiNiTriQs

October 23rd, 2010

Even though this cannot be done cross-oldbrowser wise yet, a great thing to already learn and implement for those webjunkies with the latest browsers at all times while we wait for the rest to come along… yet another nice tool in the css arsenal.

Jen

November 15th, 2010

Great, just what I needed. Thanks Andrew, and @CiNiTriQs, yep this and other css3 codes are really great ways for enhancing typography =)

Ifeanyi

February 15th, 2011

This is cool and awesome… Thanks for sharing

Ifeanyi

February 15th, 2011

Thanks for sharing this tut… Great guy.

Alessandro Pucci

April 8th, 2011

Nice tuts! A question for you… can i make an emboss effect on gradient?

Thanks

Josh

April 27th, 2011

The only problem is that the background gradient should be switched so it actually looks like the light source is coming from the top. If the light source is coming from the top, the top inside of the inset type would be in shadow hence the black shadow. The bottom edge of the inset type would be in the light hence the white shadow on the bottom. The shadows here are set up fine. Like I said the background gradient just needs switched.

I’ve also found that:

text-shadow: 0 1px 2px #a8c9e7, 0 -1px 2px #000000;

with the first color being a lighter version of the lighter gradient color but not quite white, makes a more convincing inset appearance. That’s just my experience though.

Praveen

May 12th, 2011

@rasmusfl0e and @Andrew Roberts. I tried and agree to u both.
Nice tut Andrew. I will use this in my next design. Thank you.
Keep up the good work..:-)

Prakash

June 8th, 2011

nice tutorial. working for me in IE9, chrome and in firefox.
gr8 work :)

JesseD

June 15th, 2011

Since the gradient is going from light to dark to achieve more of an inset look the high-lights and low-lights should be reversed.
I dropped down the alpha and reversed the direction:

text-shadow: rgba(0,0,0,0.3) 1px 0, rgba(0,0,0,0.2) 0 1px, rgba(255,255,255,0.3) 0 -1px, rgba(0,0,0,0.2) -1px 1px;

diek

October 30th, 2011

So if you have the patience for a newbie I have a question. How does you blend this, or the similar photoshop image, into the page? It is an cool look but right now it not cool with my limited ability. Thank you,
d

Leave a Comment

Subscribe to the comments on this article.