Menu

How to Create Inset Typography with CSS3

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.

This was published on Mar 21, 2010

45 Comments

Not working.
Just tried.

Jacob Gube Mar 21 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.

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

DxDesigns Mar 21 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!

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

David Millar Mar 21 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.

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 Mar 21 2010

great css3 tick :)

@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.

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

ardianzzz Mar 21 2010

so simple trick! nice, thank you

Andrew Roberts Mar 21 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 Mar 22 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.

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

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 Mar 22 2010

Very clever. Thanks.

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

Jordan Walker Mar 22 2010

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

Cameron Baney Mar 22 2010

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

Jenna Molby Mar 22 2010

Nice trick, thank you!

Beth McLain Mar 22 2010

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

Andrew Roberts Mar 22 2010

@FVG: Download Firefox 3.6

richard hughes Mar 23 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 Mar 24 2010

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

Andrew Roberts Mar 24 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 Mar 24 2010

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

rasmusfl0e Mar 24 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 Mar 25 2010

@rasmusfl0e: Good call man

Kenneth Glenn Apr 15 2010

Very cool, learn some new tricks everyday.

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;

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.

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 Jul 16 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.

Carp Vlad Jul 23 2010

good tip

I love that ! Thanks, merci beaucoup.

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 Oct 23 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.

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

Ifeanyi Feb 15 2011

This is cool and awesome… Thanks for sharing

Ifeanyi Feb 15 2011

Thanks for sharing this tut… Great guy.

Alessandro Pucci Apr 08 2011

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

Thanks

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 12 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 Jun 08 2011

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

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;

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

This comment section is closed. Please contact us if you have important new information about this post.

Partners