Glass morphism is a popular web design trend that combines transparency and blur effects to create a frosted glass effect. In this tutorial, we’ll break down an HTML and CSS code example that demonstrates a glass morphism effect using shapes and text.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glass Morphism | theuicode.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="circle-1"></div> <div class="circle-2"></div> <div class="circle-3"></div> <div class="content"> <div class="heading"> <p class="outlined-text">hello</p> <div class="ruler"></div> </div> <div class="glass"> <p class="glass-label">GLASS MORPHISM</p> </div> </div> </div> </body> </html>
CSS Styling
The CSS code controls the layout, colors, and glassmorphism effects. We’ll walk through each section.
Setting Up Fonts and Basic Styles
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@800&display=swap');
html, body {
margin: 0;
}
.poppins {
font-family: "Poppins", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
}
.karla {
font-family: "Karla", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
}
Here we import Google Fonts and set up base styles to remove default margins on html and body.
Centering the Main Container
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
The body uses Flexbox to center .container vertically and horizontally on the screen.
Container Styling
.container {
width: 450px;
height: 600px;
background: linear-gradient(to top right, #075265 0%, #ADA7BD 50%, #D5B7BB 75%, #F6BBB3 100%);
border-radius: 30px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
The .container provides a background gradient and a rounded shape. It also uses Flexbox to align items within it.
Creating Decorative Circles
Each circle has a unique position, size, and color.
.circle-1, .circle-2, .circle-3 {
border-radius: 50%;
position: absolute;
}
.circle-1 {
width: 150px;
height: 150px;
background: linear-gradient(to top right, #a20434, #f7bb9c);
top: 40px;
left: 60px;
}
.circle-2 {
width: 230px;
height: 230px;
background: linear-gradient(to top right, #38594b 50%, #e1a4b3 85%);
top: 200px;
right: 30px;
}
.circle-3 {
width: 125px;
height: 125px;
background: linear-gradient(to top right, #f65a45, #ffc7c0);
bottom: 80px;
left: 105px;
}
Each .circle uses position: absolute to overlay it within the container.
Glassmorphism Effect for Content
.content {
width: 225px;
height: 425px;
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1;
backdrop-filter: blur(30px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
The .content class uses:
rgba(255, 255, 255, 0.15)for a semi-transparent white background.backdrop-filter: blur(30px);to create a frosted glass effect.border: 1px solid rgba(255, 255, 255, 0.25);to give it a subtle border.
Adding a Title with Outlined Text
.outlined-text {
margin: 0;
font-family: poppins;
font-size: 42px;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
letter-spacing: -2px;
}
The .outlined-text uses color: transparent and -webkit-text-stroke to make the text appear outlined.
Adding a Ruler Below the Title
.ruler {
height: 0;
border-top: 1px solid rgba(255, 255, 255, 0.5);
width: 150%;
margin-top: -10px;
}
The .ruler class adds a thin, centered horizontal line under the title.
Adding the Glass Label
.glass {
background: rgba(255, 255, 255, 0.35);
padding: 2px 15px;
width: 75%;
border-radius: 15px;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);
position: absolute;
bottom: 15px;
}
.glass-label {
font-size: 18px;
font-family: karla;
color: white;
transform: scaleY(0.65);
width: 50%;
margin: 0;
}
- The
.glassdiv adds a lower label area with another layer of frosted transparency. .glass-labelstyles the text with a font from theKarlafont family, adding a slight scale to adjust its appearance vertically.
Conclusion
This code combines gradients, transparency, and blur to create a glassmorphism effect. By layering shapes and text, the design achieves a modern, aesthetically pleasing look that’s eye-catching and dynamic. Try experimenting with different colors, shapes, and blur values to create your custom glassmorphism effect!
0 Comments