Inner Shadow on Text with CSS

For a project I am working on right now I needed to create text that had an inner shadow. The look I wanted was that the text was almost stamped into the surface of the page.

After some searching and finding some hacks that sort of worked, I came across this great trick! Many other samples you come across leave the text looking slightly jagged, and for my purposes I wanted a soft bevel to the edges.

using the :before and :after pseudo-elements you can easily create this effect.

The key to getting the soft edges, and beveled look is to add a drop shadow, and then effect the opacity of the :before and :after pseudo-elements. By playing with those you should be able to achieve a great result.

I suggest playing with the color of the drop shadow as well, I found that by not going full black and using softer blacks, or darker versions of the background color the effect looked even better.

Another thing to keep in mind, the color you are trying to achieve with the text is going to have white overlayed on it, which means it’s going to lighten up quite a bit, I found that by picking a darker version of the font the color can be achieved perfectly, just play around with it a bit.

view demo

the html

<html>
<head>
<title>Inner Shadow For Text CSS3</title>
</head>
<body>
	<h1 class="text" title="Hello World!">Hello World!</h1>
</body>
</html>

the css

*{
	margin:0px;
}
html {
	height:100%;
	width:100%;
}
body {
	margin: 0;
    background: #0A539C;
   	background-image: linear-gradient(bottom, rgb(0,30,150) 0%, rgb(66,148,214) 100%);
	background-image: -o-linear-gradient(bottom, rgb(0,30,150) 0%, rgb(66,148,214) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(0,30,150) 0%, rgb(66,148,214) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(0,30,150) 0%, rgb(66,148,214) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(0,30,150) 0%, rgb(66,148,214) 100%);
    overflow: hidden;
	font-family:Helvetica;
	-webkit-font-smoothing: antialiased;
}
.text {
	font-size:7em;
	font-weight:bold;
	color:#000000;
	position:relative;
	padding:90px;
	letter-spacing:-4px;
	text-shadow: -1.5px -1.5px 2px #3a3a3a;
}
.text:before, .text:after {
    content: attr(title);
    color: rgba(255,255,255,1);
    position: absolute;
    padding:90px;
    letter-spacing:-4px;
}
.text:before {
    top: 1px;
    left: 1px;
    opacity:.12;
}
.text:after {
    top: 2px;
    left: 2px;
    opacity:.12;
}
This entry was posted in CSS. Bookmark the permalink.

5 Responses to Inner Shadow on Text with CSS

  1. Alex says:

    Excellent!
    This is the best inset example I’ve seen.

  2. Iggy says:

    This doesn’t work with centered text :(

    • Drew says:

      Be sure you have a wrapper for positioning around the text you wish to be applying this to. It will work just fine as long as you have a wrapper that is positioned relative or absolute.

  3. Alqin says:

    Will this be possible with a white background on the letters? I played a little with css and couldn’t do it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>