Custom Scrollbar with CSS

scrollbar.md

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar {
height: 16px !important;
overflow: visible !important;
width: 5px !important;
}

::-webkit-scrollbar-thumb {
background-image: linear-gradient(315deg, #2d3436 0%, #2d3436 74%);
background-clip: padding-box !important;
border-image: initial !important;
min-height: 28px !important;
padding: 100px 0px 0px !important;
}

::-webkit-scrollbar-thumb:hover {
background: -webkit-linear-gradient(left, rgba(158,158,158,1) 0%,rgba(180,180,180,1) 100%) !important;
background-clip: padding-box !important;
}

::-webkit-scrollbar-thumb:window-inactive {
background: -webkit-linear-gradient(left, rgb(58, 58, 58) 0%,rgba(80,80,80,1) 100%) !important;
background-clip: padding-box !important;
}

::-webkit-scrollbar-button {
height: 0px !important;
width: 0px !important;
}

::-webkit-scrollbar-track {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAAAAABVicqIAAAACXZwQWcAAABkAAAAZACHJl7mAAAASUlEQVRo3u3PQQEAIAzDQOoE/6bAyaaiv0sUXN799TOnX0hISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhIqi0mjfaIwOmF7QAAAABJRU5ErkJggg==) repeat !important;
box-shadow: inset 1px 0px 5px -2px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-corner {
background: transparent !important;
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #2d3436 transparent;
}