Text in Transparent Box using CSS3

In this tutorial, we will learn about the text in transparent box using CSS3 with example. By Apurva Mathur Last updated : July 26, 2023

Being creative is always fun. People often love creative outcomes; CSS is the platform where you can play with your creativity as much as you want. The properties which CSS provides are cool if used well. No doubt, more frameworks provide more functionality than CSS, but when you talk about basic then CSS provides us many properties and if we play with them wisely then we can create amazing results for the website.

In this article, we'll see how we can display text in the transparent box?

Displaying text in transparent box using CSS3

To display text in transparent box, you can use the CSS3 opacity property. This property can be used on any element whether it is an image, a text, a div container, etc. The opacity property helps us to make text/images go transparent according to our preference. This can make your webpage look ravishing when used perfectly. We often use RGBA color codes in this to define the color of transparency and we apply opacity by giving one extra parameter into this RGBA code whose value will be from 0.0 to 1.0. These values fundamentally define the level of transparency we want. This value shows an effect in the form of increasing to decreasing (i.e.) 0.0 will be the most transparent one in comparison to 1.0. We can use this property with RGBA color code or we can also use this directly by specifying opacity.

Example to display text in transparent box using CSS3

In this example, we are displaying text on a transparent box using CSS3.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw4Xaf0afxbWT0zXRo6apRDS4y8jJPcM0dWg&usqp=CAU") repeat;
      width: 60%;
      margin-left:20%;
      margin-top: 10%;
      }
      .text {
      background-color: cadetblue;
      border: 1px solid black;
      opacity: 0.7;
      font-weight: bolder;
      color: #000000;
      font-size: 60px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="text">
        <p>Text on Transparent box</p>
      </div>
    </div>
  </body>
</html>

The output of the above example is:

Example: Text in Transparent Box using CSS3

Explanation

HTML code: Here we'll take two div tags one inside the other as we want the text to be displayed over the box. So one div is for the creation of the box and the other div is for the display of text over the box. To uniquely identify the box I've provided them with different classes.

CSS Code: For this, we'll first design the box, and for that, I've first provided the background image link and then I've given the width of the box, rest margin property is applied to display the box at the center of the screen which is optional.

Now coming to text class designing, in this section with all the basic properties we'll define the opacity property also, you can set the property as per your desire. With this it is also important to provide the background color to the element; if you won't give background color then the text will be rarely displayed as transparent. You can set any background color.

CSS Examples »

How to create an email newsletter with CSS?

How to Create CSS3 Keyframe Animations?