Glassmorphism Design

Glassmorphism Design

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

Glassmorphism Window 7 theme

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. 🔍

board 3 – 1

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: 🃏

Glassmorphism Profile Card review

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

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

Show 2 Comments

2 Comments

  1. SSK

    How do you link these files please tell I am newbie

Leave a Reply

Your email address will not be published. Required fields are marked *

8 − seven =