Rob Kendal Freelance WordPress Developer

![Blog header for the article on background-clip CSS property](/img/css background-clip - blog post.png)

Once of the best ways to learn new things is to see them in the wild, take an interest and give them a hack about, see what makes them tick. It's how I got started in development way back in the old days of MySpace; editing the CSS in your profile and changing things up.

A while back, I came across this funky looking text effect on Apple's website, in the iPhone HR section (it was a little while ago!).

example of background-clip property used by Apple on their website

Having had a little dig around in the behind the scenes, you might be surprised to learn that it's really quite simple, taking advantage of the CSS 'background-clip' property.

The background-clip is a CSS property that determines whether an element's background is visible/shows underneath the content's border box, padding bounds, or box of the content itself. However, you can also restrict this to just the text, which is how we're going to achieve our final look in this article. You can read more about background-clip and its uses in the ever-helpful MDN documentation on background-clip.

Here's a quick, paired back demo on how to achieve this really cool text effect for yourself.

Implementing the background-clip property on your text

Firstly, fire up your favourite editor and create a new HTML page; I used CodePen and there's a link to the completed demo at the bottom of this article.

Here's the simple code we need to get things looking almost like Apple's example:

<div class="container">
  <p>...put whatever text you like in here</p>
</div>

For the complete demo, I used the excellent Samuel L. Ipsum generator for mine, you may want something a little more 'safe for work'.

Next, our simple base styles:

html {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  max-width: 950px;
  font-size: 64px;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80);
}

Nothing too special here, just a few base styles on the document to give it a punchy look, like Apple's on the HTML, and for the .container class, we're just restricting the width and making the text bold and big.

Oh, and I found this excellent background texture on Unsplash. It's a textural image created by Paweł Czerwiński.

Texture image from Unsplash comprising of pinks, purples and light blue swirls

Now, without the background-clip property, it looks a little weak and unreadable, like this:

Example of the unfinished text with the background applied

So, we need to add in the final property, background-clip: text to make the magic happen:

/* The magic */
background-clip: text;
-webkit-background-clip: text;
color: transparent;

Note: we need the color: transparent; part to make the background show through. Without it, all you'll have is white text that, whilst looking classy enough, doesn't achieve our desired effect.

Example of the finished text background effect using background-clip CSS property

Browser support for background-clip text

Support is pretty good actually with modern browsers happily clipping that text. However, in an unsurprising move, Internet Explorer does not support this CSS property. Fortunately, you can just have your text fall back to a solid colour which will work just fine.

Funky backgrounds for your text, as simple as that

And there we have it. Simple, quick, but such a striking effect that can brighten up some otherwise dull text — just be mindful of what background you choose as it can have an impact on visual impairments and make some text hard to read.

Helpful links

Here are some supporting links used in the article:

Rob Kendal

About Rob Kendal

Rob Kendal is an award-winning freelance front-end developer and marketer who likes simple, organised thinking and making clever things. You can find him working on some things on GitHub and recording podcasts, such as The Front End. Say hi and follow me on twitter

Webmentions for this article

Be one of the first to mention this article on twitter.

Comments

Read more

Create a Next.js RSS feed for your static website

Create a Next.js RSS feed for your static website

Learn how to create an RSS feed for your Next.js website in part three in the series of using WordPress as a headless CMS with Next.js

#Tutorials#Next.js#JavaScript

read the full article

30+ Helpful tools, apps and websites

30+ Helpful tools, apps and websites

Where would we be without our beloved tools and apps? I'm going to share my favourite tools, apps and websites that I use as a frontend developer to get more done in less time.

#Tips#Thoughts#Tools

read the full article

Saving text to a client-side file using vanilla JS

Saving text to a client-side file using vanilla JS

Want to save files to the client using JavaScript? Let's look at how to save a file client-side using s simple handful of vanilla JavaScript

#Tutorials#JavaScript

read the full article