Glassmorphism Design - Code Architects

Glassmorphism is a new design trend becoming popular among designers. This trend represents the old Window 7 smooth glass feature.

Glassmorphism is a light or dark surface placed on top of a colorful background. The colorful background is necessary for the effect to be properly visible. Dull background, low contrast background simply fades away under the panels, and the Glassmorphism effect is lost.

The basic logic behind the smooth glass is to blur the background of an element to give it a glass look. Adding a border of 1 pixel will make it look like a sharp cut edge of the glass. 🔍

Table of Contents

Features of Glassmorphism

Multi-layer, which makes the element look like its floating
Transparency
Blur Background
Border – To give the glass element a sharp edge

Generate Glassmorphism

Visit this site and generate the shiny glass for your element. Copy the code and paste it in your editor.

Drawback

Mozilla Firefox doesn’t support backdrop-filter 😐. Without a blur effect, the glass loses its shine effect.
Accessibility problem

Glassmorphism Code example 💻

We will now create a simple profile card with the use of Glassmorphism design effect. We need is a single <div> container. The background of the <div> will work as glass and will also be the main container.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism | @code.architects</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <img src="./img/profile pic.jpg" class="profilepic" />
        <h2 class="title">Jean Adams</h2>
        <em class="desg">Astrophile</em>
        <p class="desc">A star gagzer & Space enthusiast. Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        <div class="social">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
    </div>
</body>
</html>

The .container will have a glass background and hold the main content of the profile card. The <head> section contains the Open Sans (Google font) linked with the style.css file. <meta name=”viewport” /> tag is necessary as it is used for mobile responsiveness.

CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
	font-family: 'Open Sans', sans-serif;
	height: 100vh;
	background: url("./img/background.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

* {} changes the HTML default & body tag is a flex container with align center and a background image (necessary for glass effect).

.container {
	background: rgba(255,255,255,0.15);
	width: 300px;
	height: 400px;
	box-shadow: 0 8px 32px 0 rgba(20, 80, 19, 0.37);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	color: #fff;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

background: rgba(255,255,255,0.15) gives a shiny glass effect & backdrop-filter blurs the background of the .container element and using Flex to align everything to center. border: 1px gives this container a shiny edge.

Adding the rest of CSS to the profile card.

.profilepic {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.2);
}
.title {
	margin-top: 10px;
}
.desg {
	font-size: 0.8em;
	opacity: 0.7;
}
.desc {
	margin-top: 12px;
	opacity: 0.85;
	font-size: 0.9em;
}
.social {
	margin-top: 1.25em;
}
.social a {
	text-decoration: none;
	font-size: 1.2em;
	color: #fff;
	padding: 8px;
	transition: 0.1s;
}
.social a:hover {
	color: #f3db51;
}

Code preview: 🃏

To see the live preview h ttps://code-architects.github.io/glassmorphism-profile-card/

GitHub link for source code is https://github.com/code-architects/glassmorphism-profile-card

2 Comments

SSK


February 5, 2021, 3:21 PM

How do you link these files please tell I am newbie
- code.architects
  
  
  February 7, 2021, 10:00 AM
  
  Hey SSK,
  To link HTML with CSS tag is used
  In this code, line 9(HTML) : is linking the files.
  See the Github Code for more information https://github.com/code-architects/glassmorphism-profile-card