Create Glass Sidebar using HTML and CSS

Desktop view

On hover view

Creating a glass sidebar using HTML and CSS involves several steps. A glass sidebar typically has a translucent or frosted appearance, which you can achieve by using CSS properties like background, opacity, and blur. Here's a step-by-step guide to creating a basic glass sidebar:

Step 1: Set up your HTML structure Create an HTML file with the basic structure for your sidebar. In this example, we'll create a simple sidebar with navigation links.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create Glass Sidebar using HTML and CSS | Assignment Hippo</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <aside class="blur-sidebar">
      <div class="logo">
        <h2>Assignment Hippo</h2>
      </div>
      <ul class="links">
        <h4>Menu</h4>
        <li>
          <span class="material-symbols-outlined"> apps</span>
          <a href="#">Dashboard</a>
        </li>
        <li>
          <span class="material-symbols-outlined">show_chart</span>
          <a href="#">Stock</a>
        </li>
        <li>
          <span class="material-symbols-outlined">flag</span>
          <a href="#">Country</a>
        </li>
        <hr>
        <h4>Profile</h4>
        <li>
          <span class="material-symbols-outlined">person</span>
          <a href="#">User</a>
        </li>
        <li>
          <span class="material-symbols-outlined">group</span>
          <a href="#">Company</a>
        </li>
        <li>
            <span class="material-symbols-outlined">savings</span>
          <a href="#">Salary</a>
        </li>
        <li>
          <span class="material-symbols-outlined">monitoring</span>
          <a href="#">Data Analytic</a>
        </li>
        <hr>
        <h4>Account</h4>
        <li>
          <span class="material-symbols-outlined">notifications</span>
          <a href="#">Notification</a>
        </li>
        <li>
          <span class="material-symbols-outlined">favorite</span>
          <a href="#">Likes</a>
        </li>
        <li>
          <span class="material-symbols-outlined">settings</span>
          <a href="#">Settings</a>
        </li>
        <li class="logout-link">
          <span class="material-symbols-outlined">logout</span>
          <a href="#">Logout</a>
        </li>
      </ul>
    </aside>
  </body>
</html>

Step 2: Create the CSS styles Now, create a CSS file (styles.css) to style your glass sidebar. We'll give the sidebar a glass effect using a background with transparency, blur, and some padding.


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

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: "Poppins", sans-serif;
     }
     
     body {
         height: 100vh;
         width: 100%;
         background-image:linear-gradient(90deg,rgba(12, 24, 116, 0.4),rgba(111, 4, 108, 0.3)), url("/footer4.jpg");
         background-position: center;
         background-size: cover;
     }
     
     .blur-sidebar {
         position: fixed;
         top: 0;
         left: 0;
         width: 110px;
         height: 100%;
         display: flex;
         align-items: center;
         flex-direction: column;
         background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(17px);
         --webkit-backdrop-filter: blur(17px);
         border-right: 1px solid rgba(255, 255, 255, 0.7);
         transition: width 0.3s ease;
     }
     
     .blur-sidebar:hover {
         width: 260px;
     }
     
     .blur-sidebar .logo {
         color: #fff;
         display: flex;
         align-items: center;
         padding: 25px 10px 15px;
     }
     
     .logo img {
         width: 43px;
         border-radius: 50%;
     }
     
     .logo h2 {
         font-size: 1.15rem;
         font-weight: 600;
         margin-left: 15px;
         display: none;
     }
     
     .blur-sidebar:hover .logo h2 {
         display: block;
     }
     
     .blur-sidebar .links {
         list-style: none;
         margin-top: 20px;
         overflow-y: auto;
         scrollbar-width: none;
         height: calc(100% - 140px);
     }
     
     .blur-sidebar .links::-webkit-scrollbar {
         display: none;
     }
     
     .links li {
         display: flex;
         border-radius: 4px;
         align-items: center;
     }
     
     .links li:hover {
         cursor: pointer;
         background: #000;
     }
     
     .links h4 {
         color: #fff;
         font-weight: 500;
         display: none;
         margin-bottom: 10px;
     }
     
     .blur-sidebar:hover .links h4 {
         display: block;
     }
     
     .links hr {
         margin: 10px 8px;
         border: 1px solid #fff;
     }
     
     .blur-sidebar:hover .links hr {
         border-color: transparent;
     }
     
     .links li span {
         padding: 12px 10px;
         color: #fff;
     }
     
     .links li a {
         padding: 10px;
         color: #fff;
         display: none;
         font-weight: 500;
         white-space: nowrap;
         text-decoration: none;
     }
     
     .blur-sidebar:hover .links li a {
         display: block;
     }
     
     .links .logout-link {
         margin-top: 20px;
     }

Step 3: Add some content Inside the .content div, add the main content for your website.

Step 4: Link CSS In your HTML file, make sure to link your CSS file by adding the following line within the <head> section:


    <link rel="stylesheet" href="styles.css">

Step 5: Preview in a browser Open your HTML file in a web browser to see the glass sidebar in action.

This is a basic example of creating a glass sidebar. You can further customize the styles, add transitions, and improve the layout to suit your project's needs.

Submit Your Question Now