Hey fellow creators
How to create a glassomophorism (frost effect) in CSS?
If you prefer to watch the video version, it's right here :
1. The HTML structure.
Create a button inside two divs:
<div class="home">
<div class="container">
<button>Welcome</button>
</div>
</div>
2. Style your button.
Add an image to the background of the page:
.home {
background: url("https://images.unsplash.com/photo-1631515998058-69359a50da68?ixlib");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100vh;
padding-top: 125px;
}
Now style the container that will look frosted:
.container {
margin: auto;
width: 450px;
height: 275px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
border-radius: 5px;
position: relative;
z-index: 1;
background: inherit;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
(The z-index will create a new stacking context).
You do inherit the background of the page at the same position (if you comment it, you’ll see that otherwise you inherit the background as a whole inside of that container, which isn’t what we want!).
Next, style the button:
.container button {
padding: 10px 15px;
border-radius: 5px;
border: none;
cursor: pointer;
font-family: Lora;
background: #b6604f;
color: #f1f1f1;
font-size: 27px;
padding: 15px 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 800;
}
3. Add the frost effect!
You need to use the pseudo-element before in order to create that effect:
.container::before {
content: "";
position: absolute;
background: inherit;
z-index: -1;
inset: 0;
filter: blur(10px);
margin: -20px;
}
The z-index will also create a new stacking context, but since the pseudo-element before is kind of a child of the container, it will always stay at the top of the container.
Bravo, you are done!
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
See you soon!
Enzo.
Top comments (0)