How to Create Glassmorphism Effect?
Last Updated :
08 Dec, 2023
Glassmorphism is a very trendy and modern design style that is being used at various interfaces around the world. It is mostly used to add depth to the interfaces and promote new things while also giving a premium look to the interface. In this article, we will see What is Glassmorphism? Its characteristics, How to make a Glassmorph with an example.
Glassmorphism Effect
What is Glassmorphism?
Glassmorphism is a type of styling that as its name suggests looks like a glass. Different parts of a design are made and placed in such a way that it looks like we are looking at something through a glass. It gives the design a translucent look which looks very modern and premium. It gives the design a blurry effect. Using a colorful background with a Glassmorphism effect makes the content more noticeable. We use this to create a hovering Glass to blur certain parts of a design so that the focus can be shifted elsewhere. It can also be used to hold icons or menu options. It provides a modern and sleek look to the interface. It creates a visual hierarchy among the elements by giving them a look that they are placed on top of each other.
Characteristics of Glassmorphism
- Desired Transluceny: Having a perfect translucency for the Glassmorph card is necessary. It is also called background blur. We can make a glassmorph card using backdrop-filter CSS property.
- Evocative Backgrounds: Backgrounds are an important part of the Glassmorphs. The backgrounds should nor be too attractive that they take the user’s attention away from Glassmorph neither should be they to dull that they start looking displeasing to the eyes. Usually geometric shapes and gradients are preffered as backgrounds.
- Hierarchichal Content: Using Glassmorphs to give a hierarchical depth to different elements of an interface can help them stand out. Using Shadows and popping out animations can help the content to be promoted an advantage.
How to Create Glassmorphism?
These are the steps to make a CSS Glassmorphism:
- Use an Evocative Background which contains geometric shapes or gradients.
- Apply opacity to the Glassmorph card.
- Blur the background of the Glassmorph card using backdrop-filter CSS property.
- Add Radius and Border to the Glassmorph card.
Example: In this example, we will create an animated Glassmorphism effect using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Glassmorphism</title>
<style>
.background{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#card{
position: absolute;
height: 40%;
width: 20%;
border: 1px solid rgba( 255, 255, 255, 0.18 );
background: rgba(89, 131, 83, 0.09);
backdrop-filter: blur( 2px );
border-radius: 1em;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.8s;
}
#card:hover{
backdrop-filter: blur( 14px );
height: 50%;
width: 25%;
transform: rotateY(180deg);
}
#logo{
height: 70%;
width: 65%;
}
</style>
</head>
<body>
<div class="background">
<img src=
<div id="card">
<img id="logo" src=
</div>
</div>
</body>
</html>
|
Output:
.gif)
Glassmorph
Tips to Create the Best Glassmorphism
- Using Shadows: Using shadows in Glassmorph gives them a sense of depth which gives it a premium look.
- Creative Background: Using a colorful and creative background gives the content to be focused on a highlighted look and gives the design modern and appealing look.
- Borders: Using a border highlight helps defining the shape of the Glassmorph.
- Appropriate Blur: Using a very high or low blur effect makes the interface look a bit displeasing.
Conclusion
Glassmorphs are very useful for the users by giving the interfaces a modern and sleek look. Glassmorphs are usually used to highlight an element or give certain content a sense of depth which helps the brand to promote new things while giving users a very appealing look that has a very premium feel to it. Using an appropriate amount of blur on the glassmorph gives it a 3D look which makes certain content stand out. Glassmorph is great way to promote new things or to let people now about a new service. Glassmorph is a modern and trendy approach that should be used when making interfaces.
Share your thoughts in the comments
Please Login to comment...