Transform Your Text: Black and White CSS Stripes Made Easy

Marilena

By Marilena

4 min read
Bookmark this post

Welcome to a world where ⚫ black and ⚪ white aren’t just colors. In this post, 😃 we’ll explore the exciting world of creating black and white CSS stripes. It is a really cool effect to level up your text by adding stripes, making it even more fascinating and appealing.

We will be learning about this effect by using an example to make it crystal clear. Let’s check it out! 👩‍💻

Create basic HTML and CSS structure

We will begin with our HTML and CSS structure. Our HTML code includes a <div> element that has a class named .stripes-effect for identification and styling purposes. Following that, we add some CSS rules to apply specific styles to our HTML element with this class.

<body>
  <div class="stripes-effect">black & white text with shadow</div>
</body
HTML
body {
  background-color: black;
}

.stripes-effect {
  font-family: 'Bungee', sans-serif;
  text-align: center;
  color:  white;
}
CSS

By doing so, our heading is ready for applying our CSS stripes effect and should now look like this

This image shows a white text with a black background

Adding black and white vertical stripes

Now that we have added our basic structure, we’ll create our stripe effect gradually, step by step, until it’s perfected. Let’s add the following styling

.stripes-effect {
  ...
  background-image: linear-gradient(to right, white, black, ...);
  /* clips the background pattern */
  background-clip: text;
  /* makes text invisible */
  color: transparent;
}
CSS

In our already existing .stripes-effect class, we have the following rules:

background-image: linear-gradient(to right, white, black, ...) ➡ We begin by setting this CSS property that creates a background pattern using a gradient of alternating black and white stripes from left to right. The default direction is from top to bottom.

This image shows a white text with black and white background that comes from the CSS property background-image: linear-gradient(to right, white, black, ...) CSS property.

Don’t worry if our black-and-white text is hard to read; 🕯 😂 it is a temporary phase just to serve our purpose for now. We will move forward and see! So let’s proceed immediately! ⏳

background-clip: text ➡ By adding this property, it clips the background pattern to the shape of the text, making the text appear as if it’s filled with black and white stripes. If we just add this property and leave our CSS settings without any other change, our effect will not show properly.

This image shows that the browser clips the background when we set the -webkit-background-clip: text CSS property.

If we want this to see our effect it is necessary to proceed with the following step (color: transparent ⬇).

color: transparent ➡ It’s time to make the text transparent, enabling the background pattern we created in the previous step to be visible!

This image shows the color: transparent CSS property. We now see our text having a black and white - css zebra effect.

Black and white CSS stripes variations

The Zebra effect is not limited to vertical stripes for your texts; you can explore more options and create any effect you want. Below, you will find some variations to give you the inspiration you need.

Horizontal striped text

.stripes-effect {
  ...
  background-image: linear-gradient(white, black, ...);
}
CSS
This image shows the CSS stripes effect but with horizontal lines direction.

Diagonal striped text

.stripes-effect {
  ...
  background-image: linear-gradient(to bottom right white, black, ...);
}
CSS
This image shows the black and white CSS stripes effect but with diagonal lines direction.

🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼

DigitalOcean Referral Badge
guest
0 Comments
Inline Feedbacks
View all comments

Continue reading

Front, Programming

Make a Unique Folded Corner Effect – Step By Step Guide

Front, Programming

Keyframes in CSS Explained – Make Your Animations Stand Out

Back, Programming

How To Use Absolute Paths In A Node Project (2024)

Programming

Javascript Array Methods – Easy Examples That Make Learning A Blast

Front, Programming

How To Make CSS Reflection – The Easy Way

Front, Programming

The Unique CSS Opacity – Check Out This Amazing Property

Front, Programming

Contrast And Brightness: Empower CSS Filter For Powerful Images

Front, Programming

Opacity And Saturate: Empower CSS Filter For Unique Images

Front, Programming

CSS Last Child Selector – The Most Valuable Selector

Front, Programming

What Does span Do in HTML? Unlocking Its Full Potential

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Front, Programming

HTML Formatting Elements Made Simple: With Easy And Practical Examples

Subscribe to our newsletter

Dive into the Fun Side of Tech! Posts, News, and More Delivered to Your Inbox!

Intuit Mailchimp