10.10.2022
Glassmorphism is a style that helps the design look modern and elegant. It can be used for various purposes depending on the design objective. this effect is used to make it easier to read the text used in the photo or to focus on the content we want to highlight.
In this article, I will look at how we use HTML and CSS to create the glassmorphism effect in two different ways.
Let’s create an area inside the <body>
tag where we apply the effect.
<div class="glassbox">
<h1>Glassmorphism</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
</div>
Let’s add some style to the <body>
tag.
body {
background: #f0f1f3;
background-image: url('background-image.png');
background-size:cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin: 0;
padding: 0 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
With background-attachment: fixed
property, the size and position of the background image stay constant during page scrolling.
Let’s add some style to the div tag.
.glassbox {
position: relative;
z-index: 1;
width: 100%;
background: inherit;
box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
border-radius: 10px;
border: 1px solid rgb(255 255 255 / 15%);
text-align: center;
}
background: inherit
, its use is a major point. If we had not used the background-attachment: fixed
property, the background image would have resized according to the div tag. The situation simulates the effect of glassmorphism. The following visual is the background-attachment: fixed
unapplied state of the structure we create. In this case, the background image effect resizes in the box we want to apply.
The image created using the background-attachment: fixed
property and the background: inherit property is shown below. In the picture, we can see a continuity between the background image and the box. This situation is more appropriate for the effect of glassmorphism, so background-attachment: fixed
is a key point.
Now, using the box-shadow
attribute, let’s create a pseudo element that’s blurry and large enough to cover the effect field. So we get the effect of glassmorphism. That’s the logic underlying the first method we talked about.
.glassbox::before {
content: "";
position: absolute;
z-index: -1;
background: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0px 0px 1rem 10rem rgb(255,255,255,0.2);
filter: blur(10px);
}
Also, note that background: inherit
is used here. We can get the glassmorphism effect with using filter:blur(10px)
property.
The results of this method are shown in the following image.
We can also get the same image using the backdrop-filter
feature. backdrop-filter
property is used to apply filter effects to the background of an element. This property also frees us from creating an area or pseudo-element and more CSS rules. The property is applied directly to the background and to the element itself. However, browser support is lower compared to the filter
property of the backdrop-filter
. You can visit the can I use the site for details. With the style specified below, we can get the effect of glassmorphism.
.glassbox {
position: relative;
z-index: 1;
width: 100%;
background: rgba( 255, 255, 255, 0.10 );
box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
border-radius: 10px;
border: 1px solid rgb(255 255 255 / 15%);
text-align: center;
backdrop-filter: blur( 10.0px );
-webkit-backdrop-filter: blur( 10.0px );
}
You can find all the codes we have generated in below.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background: #f0f1f3;
background-image: url('abstract-gbe214116b_1280.png');
background-size:cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
margin: 0;
padding: 0 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
/* backdrop-filter used */
.glassbox {
position: relative;
z-index: 1;
width: 100%;
background: rgba( 255, 255, 255, 0.10 );
box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
border-radius: 10px;
border: 1px solid rgb(255 255 255 / 15%);
text-align: center;
backdrop-filter: blur( 10.0px );
-webkit-backdrop-filter: blur( 10.0px );
}
/* filter attribute and pseudo element used */
.glassbox {
position: relative;
z-index: 1;
width: 100%;
box-shadow: 0px 0px 1rem 0 rgb(0,0,0,0.2);
border-radius: 10px;
border: 1px solid rgb(255 255 255 / 15%);
text-align: center;
background: inherit;
}
.glassbox::before {
content: "";
position: absolute;
z-index: -1;
background: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0px 0px 1rem 10rem rgb(255,255,255,0.2);
filter: blur(10px);
}
h1 {
font-size: 36px;
line-height: 1.2em;
color: rgb(238, 146, 26);
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
h2 {
font-size: 20px;
line-height: 1.5em;
color: rgb(27, 77, 48);
font-family: 'Poppins', sans-serif;
font-weight: 400;
padding: 1rem;
}
</style>
</head>
<body>
<div class="glassbox">
<h1>Glassmorphism</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
</div>
</body>
</html>
Perfist Blog
Similar Articles
With the transition from Universal Analytics to Google Analytics 4, there may be some issues you need to resolve. One of these issues is “unassigned” traffic. Dimensions appearing as “unassigned” / (not set) in reports negatively impact your ability to analyze and optimize. We will discuss the causes of “unassigned” traffic in your GA4 reports […]
Read More
Beginner Level Web/App AnalyticsEarlier this year, Google Cloud announced that BigQuery data warehouse supports automatic data transfer from Facebook Ads. In its preview stage, this feature offers an alternative way to enhance analysis and insights by allowing the scheduling of data loading tasks. With this integration, the need for third-party tools or manual code execution is eliminated. This […]
Read More
Mid Level Web/App AnalyticsBy combining the app and web data in Google Analytics 4, app analysis has become more easily trackable. Firebase Analytics allows you to easily track your iOS or Android app with GA4. With numerous different tools available for mobile app tracking, being able to see both web and app data within the same property is […]
Read More
Mid Level Web/App AnalyticsBusinesses want to use as much data as possible from analytics and marketing cookies. However, in order to collect and use this data, they need to comply with laws such as KVKK/GDPR. By enabling Cookie Mode, Google helps to use cookies according to the level of consent. In other words, with Cookie Mode, users’ privacy […]
Read More
Mid Level Web/App Analytics