Neumorphism Sidebar - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neumorphism Sidebar</title> <style> body { margin: 0; font-family: Arial, sans-serif; background: #ecf0f3; height: 100vh; overflow: hidden; } .sidebar { width: 15%; height: 100vh; background: #ecf0f3; background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6), 5px 5px 20px rgba(0, 0, 0, .2), -5px -5px 20px rgba(255, 255, 255, .5); display: flex; flex-direction: column; align-items: center; padding: 4%; position: fixed; left: 0; top: 0; z-index: 1000; } .sidebar h2 { color: #333; margin-bottom: 30px; font-size: 24px; font-weight: bold; } .sidebar ul { list-style: none; padding: 0; width: 100%; } .sidebar ul li { width: 100%; padding: 15px 0; text-align: left; padding-left: 20px; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; margin-top: 20px; } .sidebar ul li:hover { background: rgba(0, 0, 0, 0.1); transform: scale(1.05); } .sidebar ul li i { font-size: 20px; margin-right: 15px; vertical-align: middle; } .sidebar ul li span { font-size: 18px; vertical-align: middle; } .sidebar ul li:nth-child(odd) { background: linear-gradient(145deg, #ffffff, #d1d9e6); box-shadow: 5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff; border-radius: 10px; } .sidebar ul li:nth-child(even) { background: linear-gradient(145deg, #d1d9e6, #ffffff); box-shadow: 5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff; border-radius: 10px; } .sidebar ul li:hover:nth-child(odd) { box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff; } .sidebar ul li:hover:nth-child(even) { box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff; } @keyframes slideIn { from { left: -300px; opacity: 0; } to { left: 0; opacity: 1; } } .sidebar .close-btn { align-self: flex-end; cursor: pointer; font-size: 20px; color: #000; margin-bottom: 20px; } .sidebar { animation: slideIn 0.5s forwards; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> </head> <body> <div class="sidebar"> <span class="close-btn">×</span> <h2>My Sidebar</h2> <ul> <li><i class="fas fa-home"></i><span>Home</span></li> <li><i class="fas fa-user"></i><span>Profile</span></li> <li><i class="fas fa-cog"></i><span>Settings</span></li> <li><i class="fas fa-envelope"></i><span>Messages</span></li> <li><i class="fas fa-bell"></i><span>Notifications</span></li> </ul> </div> <script> document.querySelector('.close-btn').addEventListener('click', function() { document.querySelector('.sidebar').style.display = 'none'; }); </script> </body> </html>