Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Glassmorphism Sidebar in HTML and CSS?
Glassmorphism is a design trend that makes elements appear translucent on the user interface, resembling frosted glass. This effect creates depth and visual hierarchy by making elements appear to float above the background with a semi-transparent, blurred appearance.
Key Properties for Glassmorphism
The glassmorphic effect is achieved using these CSS properties
- backdrop-filter: blur() Creates the frosted glass blur effect
- background-color with alpha Provides semi-transparency
- border Adds subtle borders for definition
- box-shadow Creates depth and elevation
HTML Structure
First, let's create the basic HTML structure for our glassmorphic sidebar
<div class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
CSS Styling
Now, let's apply the glassmorphic styling to create the translucent effect
.sidebar {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border-radius: 15px;
}
Complete Example
Here's the complete implementation of a glassmorphic sidebar
<!DOCTYPE html>
<html>
<head>
<title>Glassmorphism Sidebar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
}
.sidebar {
width: 250px;
height: 100vh;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-right: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
padding: 2rem 0;
}
ul {
list-style: none;
}
li {
margin: 1rem 0;
}
a {
display: block;
color: white;
text-decoration: none;
padding: 1rem 2rem;
transition: all 0.3s ease;
border-radius: 0 25px 25px 0;
margin-right: 1rem;
}
a:hover {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
transform: translateX(10px);
}
.main-content {
flex: 1;
padding: 2rem;
color: white;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#">? Home</a></li>
<li><a href="#">? About</a></li>
<li><a href="#">?? Services</a></li>
<li><a href="#">? Contact</a></li>
<li><a href="#">? Dashboard</a></li>
</ul>
</div>
<div class="main-content">
<h1>Glassmorphism Sidebar Demo</h1>
<p>This is the main content area. The sidebar demonstrates the glassmorphic effect with its translucent, frosted glass appearance.</p>
</div>
</body>
</html>
A translucent sidebar appears on the left with a frosted glass effect. The sidebar contains navigation links with icons that have a hover effect. The background shows a gradient, and the sidebar appears to float with a subtle shadow and blur effect.
Key Glassmorphism Properties Explained
| Property | Purpose | Example Value |
|---|---|---|
backdrop-filter: blur() |
Creates the frosted glass blur | blur(10px) |
background: rgba() |
Semi-transparent background | rgba(255,255,255,0.1) |
border |
Subtle edge definition | 1px solid rgba(255,255,255,0.2) |
box-shadow |
Adds depth and elevation | 0 8px 32px rgba(0,0,0,0.1) |
Conclusion
Glassmorphism creates elegant, modern interfaces using backdrop-filter blur effects and semi-transparent backgrounds. The key is balancing transparency, blur intensity, and subtle borders to achieve the perfect frosted glass appearance.
361 Views
