CSS

custom scrollbar

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Css Custom Scrollbar

*::-webkit-scrollbar {width: 10px;background-color:#0b1120} 
*::-webkit-scrollbar-track {background-color:#e2e8f0} 
*::-webkit-scrollbar-thumb {border-radius: 1rem; background-color:#94a3b8}

custom scrollbar css

/* transparent scrollbar */
div::-webkit-scrollbar {
  width: 12px;
}

div::-webkit-scrollbar-thumb {
  border: 2px solid #ffffff2f;
  border-radius: 20px;
}

Css Custom Scrollbar

body::-webkit-scrollbar {
    @apply w-[10px] bg-[#0b1120];
}
body::-webkit-scrollbar-track {
    @apply bg-slate-200 dark:bg-[#0B1120];
}
body::-webkit-scrollbar-thumb {
    @apply rounded-xl bg-gray-600 dark:bg-slate-700;
}

style scrollbar

/* Chrome, safari */
*::-webkit-scrollbar {
	width: 8px;
}

*::-webkit-scrollbar-thumb {
	background-color: gray;
}

/* Firefox */
.selector {
		scrollbar-width: none;
	}

css custom scrollbar

::-webkit-scrollbar { } /* Entrie scrollbar*/
::-webkit-scrollbar-track { } /* Scrollbar track */
::-webkit-scrollbar-thumb { } /* Scrollbar handle */

Custom Scroll Bar CSS

::-webkit-scrollbar{
    width: 0.9vw;
    background: #777;
}
::-webkit-scrollbar-thumb{
    background: -webkit-linear-gradient(transparent,#30ff00);
    background: linear-gradient(transparent,#30ff00);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover{
   background: -webkit-linear-gradient(transparent,#00c6ff);
   background: linear-gradient(transparent,#00c6ff); 
}

customize scroll bar CSS

  .Class::-webkit-scrollbar {
    width: 2px;
  }
  
  .Class::-webkit-scrollbar-track {
    border-radius: px;
    background: #c9cacc;
  }
  
  .Class::-webkit-scrollbar-track:hover {
    background: #78797a;
  }
  
  .Class::-webkit-scrollbar-thumb {
    background: #3d5585; 
    border-radius: 10px;
  }
  
  .scroll-bar::-webkit-scrollbar-thumb:hover {
    background: #01143b; 
  }

custom scrollbar

  body::-webkit-scrollbar {
    width: 12px;
}
body::-webkit-scrollbar-thumb {
    background: #ff9c44;
    border-radius: 6px;
}

by moheen

scrollbar style

::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
::-webkit-scrollbar-track addresses the empty space “below” the progress bar
::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements