inset text effect with css

How to create inset text with CSS Web design (for beginners)

Inset text can make your Web design look beautiful, and while it is cutting edge, it's also super easy for beginners to implement using CSS and a bit of HTML.

Creating text with subtle shadows and shading, that gives the impression of depth, is a widely used Web design technique on many leading blogs and websites.

You can even see it in action in the SME Pals site name - and best of all, it uses lightweight, clean CSS instead of clunky, slow images.

This article will tell you what you need in order to create a beautiful Web design using inset text with CSS and HTML, and shows how to implement it, step-by-step.

HTML & CSS

Unlike my previous articles on Web design using CSS3, like Killer CSS3 Web design tips for complete beginners, that only required a class or id attribute in order to attach various styles, we actually need to be able to edit the HTML elements that wrap the text we want to inset.

So, you need access to the website's underlying HTML, as well as the CSS stylesheets. Alternatively, make sure you are using one of the leading website builders like Weebly or Bigcommerce (for shopping carts) that allow for customization of HTML and CSS code.

If you don't have access to stylesheets, then it is possible to add the CSS declarations to your webpages using the <style> tag.

Designing inset text step-by-step

In order to properly implement the inset text design, we will need to use a few nifty CSS tricks, including opacity, positioning, and the :before qualifier.

Let's begin by creating some text standard text...

1. Create the HTML

Inset text is only really effective on larger fonts, and in particular, bold text - on small type it can make things harder to read.

So, we should only really consider adding inset design to page titles or headings. Let's create an inset heading and give it a class that we can use to style it, like this:

<h2 class="inset" title="Inset text">Inset text</h2>

Note the inclusion of the title attribute. It's important because we are going to use it in the CSS next.

2. Style the HTML with CSS

By itself, this heading will pick up the default H2 heading style of the site, so we are going to change things up a bit by giving it its own CSS class declaration, like so:

h2.inset{
  font-size: 5em;
  font-weight: 900;
  color: #224970;
font-family: Georgia;
}

This makes our header look like this:

Inset text

3. Apply inset shadow using :before

Now comes the cool design part.

We can attach an additional style to this class using the title attribute (which is why we included title in the HTML), and style it with some neat effects to give the impression of light falling across inset copy:

h2.inset:before{
  font-size: 5em;
  font-weight: 900;

position: absolute;
  margin: 2px 0 0 2px;
  content:attr(title);
  color: #fff;
  opacity: 0.2
  filter:alpha(opacity=20);
}

The important parts are highlighted in the CSS above. Effectively, our CSS style instructions are:

  1. Insert content "before" the h2.inset element
  2. Position it absolutely so that it appears "on top of" the target element
  3. Offset it slightly with margins
  4. Make the content the same as specified in the element's title attribute
  5. Give it a white coloring
  6. Make it opaque

If you get the margins just right, the effect is pretty striking:

Inset text

4. Shading & colors

Now while you can probably see the inset from the code above, it is not as effective as it could be because the white highlighting on the edges of the text is obscured by the light background of the page.

It's important to get the coloring just right to imitate that beautiful "soft" appearance that the leading Web designers achieve. We can put the exact same text on a darker background to give it more visual impact:

Inset text

Obviously, you will need to play around with the colors so that they match the color scheme of your theme or template. Many high quality themes come with this effect built in, so it is worth exploring some of the leading theme developers (for WordPress, and other leading CMS systems) too.

So that's how I create an inset text Web design effect. Was this easy for you to get right, or is there a better/easier way to do it?

Share your thoughts in the comments, or send me a link of the design you created with this technique.

Make stunning sites using Google fonts

Regardless of whether you have a blog or an eCommerce store, having a beautiful website will lead to an increase in conversions, because people trust professional looking sites more.

Even though there are a few examples where unattractive site design has not prevented a business from becoming popular, good Web design makes better financial sense.

So why not make the effort?

Looking for the ultimate guide on how to start a blog or website with WordPress? Follow the steps in this guide to build a blog or small business website (including themes, hosting, design, & more) quickly and easily.

From a business perspective, it is important to keep blog or website design and development times short so that you can focus on getting traffic and making money.

Managing 404 server error response pages

Well managed 404 "file not found" errors can turn potential problems into great opportunities that help you get the most from Web traffic that might otherwise slip between the cracks.

Even if visitors are trying to find content that no longer exists, a good 404 error page can direct them to the information they are after and lead to a conversion - just like any other good landing page.

Makes sense right? Just because a visitor is after a non-existent page (perhaps they have been directed to a mistyped URL from another site) doesn't mean we can't try give them what they're after anyway.

How to add Getresponse email marketing to your store

One of the key factors in the success of any eCommerce site is great marketing - and email is one of the most effective of all Internet marketing strategies.

Web design mistakes that can be fixed (unlike spilled milk)

Good Web design is important for success online, but big companies implement bad design all the time.

Old HTML tables can be upgraded into a responsive design with CSS3 and media queries

Mobile first, responsive Web design is something that can't be ignored because devices likes tablets and smartphones are quickly becoming the dominant browsi

Learn how to change your blog or website domain name without losing precious Google traffic, PageRank or SEO juice.

drupal links how-to

Creating internal hyperlinks in Drupal, from one page to another, can be slightly tricky - node IDs, path aliases, the Drupal url() function, all play a role.

Fully qualified links, those that contain the entire address including http, are easy enough to use, but it's not good practice to enter a static, fully qualified URL when linking from one page or blog post to another.

Fully qualified links, by definition, include the domain name. If that changes all these links break, and, if the site is substantial, it would require a lot of work to fix everything.

Luckily there is a better way...

Weebly website builder

Here's a quick step-by-step, beginner's guide to building a website (for free, or very little cost) using one of the world's best website builders - Weebly.

The reason I chose Weebly to create a website is because hosted website builders, like Weebly, are easier to use than alternative Web design methods for small business - such as content management systems (CMS).

For small and home business startups, or traditional businesses without solid Web design skills and experience, a good website builder is the natural choice to create a professional website quickly, and cheaply.

website builders overtake cms

Drupal & Joomla are two popular CMS systems that offer powerful Web design and development features, and both have recently been overtaken in popularity

Basic HTML code for bloggers and newbies

Having a basic knowledge of HTML (HyperText Markup Language) can be a huge help for bloggers, online entrepreneurs, or anyone who might be asked to

Our goal is to provide you with free, unique tips & insights into the world of small business. To support ourselves we use ads and affiliate relationships. We may, or may not, earn a small commission (at no cost to you) as a result purchases you make via links clicked on SME Pals.