SME Pals is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.
inset text effect with css

How to Create Inset Text with CSS

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.

DesignModo email and website design apps

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

To get an inset effect you'll need to be able to edit the HTML elements that wrap the text we want to inset.

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 your site's CSS stylesheets it is possible to add the CSS declarations to your content using the <style> tag - assuming this isn't filtered out by the online editor.

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.4
  filter:alpha(opacity=40);
}

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.

Learn how to make money from each and every blog post

Learn how to research, plan and create awesome blog content designed to amaze readers and turn them into avid fans, allowing you to make money online.

Proof that business blogging works. Pic by nicoleec

The vast majority (in the region of 95%) of all sites and blogs ever created fail to make any money at all - let alone a profit.

Video blogging (adding clips to a blog) can help to drive traffic, lower bounce rate, increase engagement and conversions, and generally improve SEO (Search Engine Optimization) and Internet marketing.

Video blogging also provides plenty of "different" marketing opportunities that written content can't - because it is a rich medium for communication.

Bloggers who rely on written content only may find their rankings in search engines suffering as Google continues to include more and more video results (especially from YouTube) in its organic search results.

Almost all businesses that have researched Internet marketing strategies are aware that high quality, engaging and relevant content is one of the best ways to drive valuable organic Web traffic.

The problem is that many people don't have the time or patience to build up a good base of content via blogging.

So what's the alternative?

Blogging traffic tips. Pic by duncan c

A lot of popular blogging techniques have died out as Google's search algorithms (and the rise of social media) have changed the content landscape of the Internet.

For startups and small businesses utilizing blogging as part of their content marketing strategy, keeping tabs on industry best practices can be a bit like trying to herd cats.

As a result, unfortunately, many people find themselves swimming upstream as their content fails to capture high rankings in search results, generates little to no buzz, and generally offers little to no return on investment (ROI).

Blog post ideas. Image by Albrecht Fietz from Pixabay

Get unlimited blog topic and blog post ideas any time you like. Social media post ideas? No problem.

How to start a blog with WordPress

Learn how to start a blog using WordPress by following this super easy step-by-step guide that covers both hosted and self-hosted blogs.

website builders overtake cms

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

Sales funnels

Well researched, planned and implemented sales funnels can simultaneously boost traffic and increase conversions and revenue to make more money for blogs and

Reach out to influencers to grow your blog. Pic by uncoolbob

If you're blogging regularly, using SEO, sharing content socially, sending out newsletters, marketing, and doing everything right without success, then I've

Start blogging

Blogging works! It doesn't matter if you are a college student thinking about making extra pocket money, or a entrepreneur looking to promote your brand.

It also doesn't matter what topic you decide to write about, provided it is a relevant to your niche and something you are passionate about and interested in.

Starting a blog is exciting, but it is also a medium to long term commitment (if you want to derive any real benefit from it), but if you have the drive to succeed there's no better time to start.

A breakdown of organic search traffic costs

Google recently ruined our startup launch with a 'false positive' phishing warning that coincided perfectly with our launch announcement to 4500 existing customers.

The article I wrote about that hugely damaging mistake attracted the attention of John Mueller, who responded sympathetically and said he would 'let the team know' about the problem.

Good to his word, I noted a few hits from Mountain view, California on the affected site and at the article, and a few hours later the erroneous phishing message was removed.

Back to Top