How to Create Glassmorphism Sidebar in HTML & CSS ?

Last Updated : 14 Mar, 2024

Glassmorphism is a design trend inspired by glass surfaces, featuring semi-transparent elements resembling frosted glass. It adds depth through layers and blur effects, simulating light interactions for realism.

With its sleek appearance, glass morphism creates modern and immersive user interfaces, enhancing both aesthetics and user experience.

Glassmorphism Sidebar
Approach:

We start by structuring the webpage with separate sections for navigation and content.
Utilizing Font Awesome icons, we enhance the visual representation of navigation items.
Employing CSS, we style the navigation section to achieve a glassmorphism effect with hover animations.
We focus on maintaining a cohesive design language throughout the webpage.
Finally, we ensure readability and accessibility by carefully choosing font styles and colors.

Example: Implementation of Glassmorphism Sidebar in 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 Website with Sidebar</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Correct Font Awesome CDN -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>

<body>
    <aside class="sidebar">
        <h2><i class="fas fa-bars"></i><span> Menu</span></h2>
        <ul>
            <li><a href="#"><i class="fas fa-home"></i><span>
                        Home</span></a>
            </li>
            <li><a href="#"><i class="fas fa-cogs"></i><span>
                        Services</span></a>
            </li>
            <li><a href="#"><i class="fas fa-images"></i><span>
                        Portfolio</span></a>
            </li>
            <li><a href="#"><i class="fas fa-envelope"></i><span>
                        Contact</span></a>
            </li>
            <!-- Additional Sidebar Items -->
            <li><a href="#"><i class="fas fa-info-circle"></i><span>
                        About Us</span></a>
            </li>
            <li><a href="#"><i class="fas fa-user"></i><span>
                        Profile</span></a>
            </li>
        </ul>
    </aside>

    <div class="main-content">
        <div class="header">
            <h1>Welcome to GeekforGeeks</h1>
        </div>
        <div class="content-section">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311124318/downloaded_file-200.jpeg"
                alt="GeekforGeeks Logo" class="gfg-logo">
            <h2>About GeekforGeeks</h2>
            <p>
                  GeekforGeeks is a leading platform providing 
                  computer science resources and coding challenges for
                programmers and technology enthusiasts. With 
                  tutorials, practice problems, articles, and courses, it
                aims to empower individuals to enhance their 
                  programming skills. The logo represents GeekforGeeks'
                commitment to excellence and innovation in the tech community.
              </p>
        </div>
    </div>
</body>

</html>

CSS

/* style.css*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    min-height: 100vh;
    background: 
    linear-gradient(45deg, rgba(153, 102, 255, 0.7), rgba(102, 204, 255, 0.7));
    /* Background gradient with transparency */
    color: #fff;
    /* Main text color */
}

.sidebar {
    width: 70px;
    /* Initial width only for icons */
    background: rgba(255, 255, 255, 0.3);
    /* Light background with transparency */
    padding: 20px;
    transition: width 0.3s ease;
    color: #090909
}

.sidebar:hover {
    width: 250px;
    /* Expanded width on hover */
}

.sidebar h2 {
    color: #090909;
    /* Black text color */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.sidebar h2 span {
    display: none;
    /* Initially hide text */
}

.sidebar h2:hover span {
    display: inline;
    /* Display text on hover */
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #121010;
    /* Black text color */
    display: flex;
    align-items: center;
}

.sidebar ul li a:hover {
    color: #0f0f0f;
    /* Darker black text color on hover */
}

.sidebar ul li a i {
    margin-right: 10px;
}

.sidebar ul li a span {
    display: none;
    /* Initially hide text */
}

.sidebar ul li a:hover span {
    display: inline;
    /* Display text on hover */
}

.main-content {
    flex: 1;
    padding: 20px;
}

.header h1 {
    font-size: 2rem;
    text-align: center;
    color: #fff;
    /* White header text color */
}

.content-section {
    background: rgba(255, 255, 255, 0.3);
    /* Solid background with transparency */
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center align content */
}

.gfg-logo {
    height: 150px;
    width: 150px;
    margin-bottom: 20px;
}

.content-section h2 {
    color: #fff;
    /* White section title color */
    margin-bottom: 10px;
}

.content-section p {
    color: #fff;
    /* White paragraph text color */
}