inset text effect with css

How to Create Inset Text with CSS

Disclosure: Just so you know, we may sometimes earn a small commission from affiliate links on this site.

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.

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

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.

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

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

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.

Genuine bloggers and businesses use high quality articles to build high page rankings in Google and generate plenty of valuable organic search traffic.

The problem is that the better the content, the more likely it is that others will duplicate, copy, or spin those articles and publish them on their own sites (without permission or attribution).

Most of the time this is not an issue because low quality, article spinning sites generally tend not to rank well in Google search results.

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.

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

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.

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.

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.

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.

Learn how to make money from each and every blog post

Have you tried blogging with the goal of making money online only to find that no-one reads or shares your articles?

Back to Top