Design Details: Inset Text Shadows

As browsers like Safari and Firefox have started supporting the text-shadow property, I’ve found myself using it more and more to add subtle dimension to my text. The best way to do that is making your text look inset. There are only two techniques; and while they’re pretty simple, it’s important to get your shadows and colors going the right direction.

Inset Text on a Light Background

inset2

A couple of things to remember here. First, the background needs to be light enough to see the dark text on top of it, but not too light. This inset uses a white shadow, and if the background is too light you won’t be able to see it. The text-shadow will go down 1px and to the right 1px. This way it looks like the light is coming from the top left and highlighting the bottom right corner of the text. The code is pretty simple, set a color, offset for horizontal and vertical and a blur value. We’ll be keeping it to 0 to get a nice clean edge for inset text.

 text-shadow: #fff 1px 1px 0;

If it’s too harsh, you can adjust the color of the shadow to be somewhere in between white and the background color.

Inset Text on a Dark Background

inset1

This one’s a little easier. Just make a dark background and light text. This time we reverse the shadow position and inverse the color. So we have a dark shadow 1px top and 1px left. You probably won’t want to use black here. Find a mixture of black and the background color.

 text-shadow: #000 -1px -1px 0;

The text-shadow property isn’t supported in all browsers, so you need to make sure your shadow isn’t a crutch that the design depends on. A bad example would be white text on a very light background. Sure the shadow helps it stand out but it will be virtually unreadable in Internet Explorer without it.

inset4

Above all, the key to this technique is subtlety. We don’t want highlights or shadows that stick out like a sore thumb. They should just add a hint of depth.

About: Jonathan Longnecker

jonathan longneckerJonathan Longnecker is the co-founder of FortySeven Media
– a kick awesome design firm specializing in web, print and media creation. Jonathan loves simple designs that communicate quickly, and is fanatical about the details that sets their work apart. Find him on twitter (@necker47), and on the web at fortysevenmedia.com.

4 Comments

  1. Web Designer UK

    New CSS properties like shadows certianly provide new ways to style and deliver content on a web page. It is about time browsers start to support additional text styles. Technology especially internet speeds have evolved significantly in recent years. We need new web standards with a much wider support for text styles. However that said, browser inconsistency still creates problems althoug it has improved with time. I would still be wary of using inset shadows on text and other non standard fonts for this reason, at least for some more time.

    Reply
  2. web designer stalker

    Personally i still prefer to create this style in photoshop as browser support is fairly minimal. If IE8 supports it then I may start to use it more throughout the development phase…..

    Reply
  3. Norma

    Would look better using a rgba instead of just 000, fff

    Reply
  4. the future

    Thanks. I was wondering if the word ‘inset’ was a reserved keyword like box-shadow uses.

    Reply

Submit a Comment

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

More News & Articles

The Essential Guide to Getting Started on Freelance Writing

The Essential Guide to Getting Started on Freelance Writing

Explore the lucrative and fulfilling world of freelance writing with our essential guide. Learn about specialties like blogging, social media, article, and technical writing. Build a portfolio, find work, set up your business, and discover the potential earnings. Embrace the freedom of working from home and follow tips for success in your dream career.

Securing Your Website: A DevOps Security Checklist

Securing Your Website: A DevOps Security Checklist

Learn how to secure your website with a comprehensive DevOps checklist. Dive into SSL/TLS encryption, password practices, and more. Discover the power of Content Security Policy and safeguard your online presence effectively.

EMAIL NEWSLETTER