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”.
<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.
.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.
body {
background-image: url('/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:
<!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('/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
The longest English word is 189,819 letters long.
Example of adding a glass background effect to the text:
<!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>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.
Example of creating a glass background effect with the background-color property:
<!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: center;
}
</style>
</head>
<body>
<div class="glassy-text">
Mercedes invented a car controlled by joystick.
</div>
</body>
</html>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:
<!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>