W3Docs

Appearance

  1. Snippets
  2. CSS
  3. How to Add a Glass Background Effect to the Text

How to Add a Glass Background Effect to the Text ​

If you are tired of classical text effects and are looking for interesting and rare ones, then read our snippet and learn how to create a text with glass background effect. It’s straightforward, but at the same time, very creative.

Let’s dive in and try to create one.

Solution with the CSS backdrop-filter property ​

The first method of creating such an effect is using the CSS backdrop-filter property. Let’s do it step by step.

Create HTML ​

  • Use the HTML <div> and give it a class name “glassy-text”.

How to create an HTML <div> tag and give it a class name “glassy-text” ?

html
<div class="glassy-text">
  The longest English word is 189,819 letters long.
</div>

Add CSS ​

  • Choose the size and font of your text with the help of the font-family property, which allows creating a prioritized list of font family names for the selected element and font-size property to set the font size of the text.
  • Use the text-align property to set the alignment of the last line of the text by choosing the “center” value.
  • Put the padding property, which creates space around the element content, and give it a value. We will use the same values for the top and the bottom (20px) and the same for the left and the right (40px).
  • Add the backdrop-filter property, which is used to put filter effects (blur, drop-shadow, brightness and so on) in the background/backdrop of an element. Here, we choose the “blur” effect and add the background-color property.

How to style "glassy-text" class using CSS font-family, font-size, text-align and padding properties?

css
.glassy-text {
  font-family: courier;
  font-size: large;
  text-align: center;
  padding: 20px 40px;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .glassy-text {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
  }
}
  • Put the background-image property with its “URL” value.
  • Set the background-position property, which specifies where the starting position of the background image should be, and choose a value.
  • Use the background-size property to define the size of the background image and choose the “cover” value to scale background image to the largest size, so that its width and height can fill inside the content area. Of course, you can use another value that is preferable for your Website.
  • Use the background-repeat property to define how the background image should be repeated.
  • With the help of the place-items property, align the text. You can choose any value and decide where to put your element.
  • Use the display property, which defines the type of the box which is used for an HTML element and choose the “grid” value.
  • Add the margin property to create space around the image.
  • Put the height property to set the image’s height.

How to style an HTML <body> tag using CSS background-image, background-position, background-size, height display and place-items properties?

css
body {
  background-image: url('https://www.w3docs.com/uploads/media/default/0001/05/ddb73d2da485bbaf0496da74cb668cca105cb335.jpeg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  display: grid;
  place-items: start;
  margin: 0;
}

Now let’s bring all parts above together and try some examples.

Example of creating a glass background effect with the backdrop-filter property: ​

An example of how to give a glass background effect to the text with CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .glassy-text {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
        color: #333;
        font-family: system-ui, sans-serif;
        line-height: 1.5;
        max-width: 50%;
        padding: 1rem 2rem;
      }
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .glassy-text {
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
          background-color: rgba(255, 255, 255, 0.5);
        }
      }
      body {
        background-image: url('https://www.w3docs.com/uploads/media/default/0001/05/ddb73d2da485bbaf0496da74cb668cca105cb335.jpeg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
      }
    </style>
  </head>
  <body>
    <div class="glassy-text">
      The longest English word is 189,819 letters long.
    </div>
  </body>
</html>

Result

Example of adding a glass background effect to the text: ​

An example of how to give a glass background effect to the text using CSS backdrop-filter property

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .glassy-text {
        background-color: rgba(89, 79, 128, 0.74);
        border-radius: 5px;
        color: #ffffff;
        font-family: Lucida Handwriting, serif;
        line-height: 1.7;
        font-size: 20px;
        text-align: center;
        max-width: 50%;
        padding: 2rem 3rem;
      }
      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .glassy-text {
          -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
          background-color: rgba(89, 79, 128, 0.74);
        }
      }
      body {
        background-image: url('https://www.pocketwatch.co.uk/blog/wp-content/uploads/2018/05/ThinkstockPhotos-97407485-1024x680.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        margin: 0;
        display: grid;
        place-items: center;
      }
    </style>
  </head>
  <body>
    <div class="glassy-text">
      That tiny pocket in jeans was designed to store pocket watches.
    </div>
  </body>
</html>

Result

Solution with the CSS background-color property ​

Instead of the backdrop-filter property, you can use the background-color property, which sets an element background color. Here is an example of this method step by step:

  • Set the background image and size for the page container.
  • Style the text container with a semi-transparent background-color using rgba.
  • Add a box-shadow for depth and set a valid position value to allow offset positioning.

Example of creating a glass background effect with the background-color property: ​

An example of How to Give a Glass Background Effect to the Text with CSS background-color property

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-image: url('https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/mercedes-logo-linda-camper.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 600px;
      }
      .glassy-text {
        font-family: Gabriola, serif;
        font-size: 30px;
        text-align: center;
        padding: 20px;
        line-height: 1.5;
        color: #FFFFFF;
        text-shadow: 2px 2px #000000;
        margin-top: 250px;
        min-height: 50px;
        max-width: 560px;
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="glassy-text">
      Mercedes invented a car controlled by joystick.
    </div>
  </body>
</html>

Result

Solution with the CSS filter property ​

The third way of making glass background effect is using the CSS filter property. Use the “blur” value of this property, which applies blur on the image.

Example of creating a glass background effect with the filter property: ​

An example of How to Give a Glass Background Effect to the Text with CSS filter property

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .background {
        position: relative;
        width: 100%;
        height: 100vh;
        background-image: url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=707&q=80");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .blur {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-image: url("https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=707&q=80");
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(10px);
        transition: filter .5s ease;
        backface-visibility: hidden;
      }
      .background:hover .blur {
        filter: blur(0);
      }
      .text {
        display: inline-block;
        font-family: sans-serif;
        text-transform: uppercase;
        color: #f5e689;
        font-weight: 500;
        text-align: center;
        position: relative;
        left: 25%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="background">
      <div class="blur"></div>
      <h1 class="text">Paris <br />lights</h1>
    </div>
  </body>
</html>

Result

Dual-run preview — compare with live Symfony routes.