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.


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:

  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:

  font-size: 5em;
  font-weight: 900;
  position: absolute;
  margin: 2px 0 0 2px;
  color: #fff;
  opacity: 0.4

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.

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.

Learn how to write a blog. Pic by icatus

Learning how to blog is an important business skill that can increase page rankings in Google and bring plenty of traffic to your website.

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

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

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.

why sharing content is bad for business

Content syndication (sharing stuff with permission) can be a great way for small businesses to get more website traffic.

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.

No blog traffic. Pic by stefanos papachristou

If you're creating great content on regular basis, but not driving traffic or engaging new customers then you need to understand what to change, before expen

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.

Convincing bloggers to promote your company

Blogger outreach and PR is difficult - I've read a lot of How to articles and guides that say stuff like "Get bloggers to review your site or product", or, "Get as many backlinks from other bloggers as possible".

So everyone knows what to do, but no-one's talking about how to do it. In fact, gathering backlinks is often time consuming, ineffective and infuriating.

Hands up anyone who has spent several hours emailing other bloggers asking them to take a second to look over your new [blog/site/product/service/article/video] and gotten almost no response. It happens all the time.

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

Back to Top