Blue Scrollbar

♡

<style>
::-webkit-scrollbar {
width: 14px;
}
                    
::-webkit-scrollbar:horizontal {
                      height: 14px;
                    }
                    
                    ::-webkit-scrollbar-corner {
                      background: #e8f4ff; 
                    }
                    
              
                    ::-webkit-scrollbar-track:vertical {
                      background: linear-gradient(90deg, #e6f3ff, #e8f0ff);
                      border-radius: 0px;
                    }
                    
                    ::-webkit-scrollbar-track:horizontal {
                      background: linear-gradient(180deg, #e6f3ff, #e8f0ff);
                      border-radius: 0px;
                    }
                    
               
                    ::-webkit-scrollbar-thumb {
                      border: 1.5px solid #9bb7d9; 
                      border-radius: 0px;
                      box-shadow: inset 0 -1px 2px #fff, inset 0 1px 2px #fff;
                    }
                    
                    ::-webkit-scrollbar-thumb:vertical {
                      background: linear-gradient(90deg, #cfe6ff 40%, #d7d9ff 100%); 
                    }
                    
                    ::-webkit-scrollbar-thumb:horizontal {
                      background: linear-gradient(180deg, #cfe6ff 40%, #d7d9ff 100%);
                    }
                    
                 
                    ::-webkit-scrollbar-button:horizontal:end:increment,
                    ::-webkit-scrollbar-button:horizontal:start:decrement,
                    ::-webkit-scrollbar-button:vertical:end:increment,
                    ::-webkit-scrollbar-button:vertical:start:decrement {
                      display: block;
                    }
                    
                    ::-webkit-scrollbar-button:vertical {
                      height: 15px;
                    }
                    
                  
                    ::-webkit-scrollbar-button:vertical:start:decrement {
                      background: #e6f3ff;
                      background-image: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #b3c9e6;
                      border-radius: 0px;
                    }
                    
                  
                    ::-webkit-scrollbar-button:vertical:end:increment {
                      background: #e8f0ff;
                      background-image: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #b3c9e6;
                      border-radius: 0px;
                    }
                    
                    ::-webkit-scrollbar-button:horizontal {
                      width: 14px;
                    }
                    
                   
                    ::-webkit-scrollbar-button:horizontal:start:decrement {
                      background: linear-gradient(180deg, #e6f3ff, #e8f0ff);
                      background-image: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #b3c9e6;
                      border-radius: 0px;
                    }
                    
                   
                    ::-webkit-scrollbar-button:horizontal:end:increment {
                      background: linear-gradient(180deg, #e6f3ff, #e8f0ff);
                      background-image: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #b3c9e6;
                      border-radius: 0px;
                    }
                    </style>

Pink Scrollbar

♡

                <style>
                    ::-webkit-scrollbar {
                      width: 14px;
                    }
                    
                    ::-webkit-scrollbar:horizontal {
                      height: 14px;
                    }
                    
                    ::-webkit-scrollbar-corner {
                      background: #ffeaf7; 
                    }
                    
                 
                    ::-webkit-scrollbar-track:vertical {
                      background: linear-gradient(90deg, #ffe4f3, #fbe4ff); 
                      border-radius: 0px;
                    }
                    
                    ::-webkit-scrollbar-track:horizontal {
                      background: linear-gradient(180deg, #ffe4f3, #fbe4ff);
                      border-radius: 0px;
                    }
                    
               
                    ::-webkit-scrollbar-thumb {
                      border: 1.5px solid #e7b6d8; 
                      border-radius: 0px;
                      box-shadow: inset 0 -1px 2px #fff, inset 0 1px 2px #fff;
                    }
                    
                    ::-webkit-scrollbar-thumb:vertical {
                      background: linear-gradient(90deg, #ffd1ea 40%, #f3c7ff 100%); 
                    }
                    
                    ::-webkit-scrollbar-thumb:horizontal {
                      background: linear-gradient(180deg, #ffd1ea 40%, #f3c7ff 100%);
                    }
                    
                
                    ::-webkit-scrollbar-button:horizontal:end:increment,
                    ::-webkit-scrollbar-button:horizontal:start:decrement,
                    ::-webkit-scrollbar-button:vertical:end:increment,
                    ::-webkit-scrollbar-button:vertical:start:decrement {
                      display: block;
                    }
                    
                    ::-webkit-scrollbar-button:vertical {
                      height: 15px;
                    }
                    
               
                    ::-webkit-scrollbar-button:vertical:start:decrement {
                      background: #ffe4f3;
                      background-image: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #e7b6d8;
                      border-radius: 0px;
                    }
                    
                  
                    ::-webkit-scrollbar-button:vertical:end:increment {
                      background: #fbe4ff;
                      background-image: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #e7b6d8;
                      border-radius: 0px;
                    }
                    
                    ::-webkit-scrollbar-button:horizontal {
                      width: 14px;
                    }
                    
                
                    ::-webkit-scrollbar-button:horizontal:start:decrement {
                      background: linear-gradient(180deg, #ffe4f3, #fbe4ff);
                      background-image: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #e7b6d8;
                      border-radius: 0px;
                    }
                    
                 
                    ::-webkit-scrollbar-button:horizontal:end:increment {
                      background: linear-gradient(180deg, #ffe4f3, #fbe4ff);
                      background-image: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png");
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: 100% auto;
                      border: 1.5px solid #e7b6d8;
                      border-radius: 0px;
                    }
                    </style>

Yellow Scrollbar

♡

              <style>
                ::-webkit-scrollbar {
                  width: 14px;
                }
                
                ::-webkit-scrollbar:horizontal {
                  height: 14px;
                }
                
                ::-webkit-scrollbar-corner {
                  background: #e8f4ff; 
                }
                
                
                ::-webkit-scrollbar-track:vertical {
                  background: linear-gradient(90deg, #e6f3ff, #e8f0ff); 
                  border-radius: 0px;
                }
                
                ::-webkit-scrollbar-track:horizontal {
                  background: linear-gradient(180deg, #e6f3ff, #e8f0ff);
                  border-radius: 0px;
                }
                
              
                ::-webkit-scrollbar-thumb {
                  border: 1.5px solid #9bb7d9; 
                  border-radius: 0px;
                  box-shadow: inset 0 -1px 2px #fff, inset 0 1px 2px #fff;
                }
                
                ::-webkit-scrollbar-thumb:vertical {
                  background: linear-gradient(90deg, #cfe6ff 40%, #d7d9ff 100%); /
                }
                
                ::-webkit-scrollbar-thumb:horizontal {
                  background: linear-gradient(180deg, #cfe6ff 40%, #d7d9ff 100%);
                }
                
               
                ::-webkit-scrollbar-button:horizontal:end:increment,
                ::-webkit-scrollbar-button:horizontal:start:decrement,
                ::-webkit-scrollbar-button:vertical:end:increment,
                ::-webkit-scrollbar-button:vertical:start:decrement {
                  display: block;
                }
                
                ::-webkit-scrollbar-button:vertical {
                  height: 15px;
                }
                
              
                ::-webkit-scrollbar-button:vertical:start:decrement {
                  background: #e6f3ff;
                  background-image: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png");
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 100% auto;
                  border: 1.5px solid #b3c9e6;
                  border-radius: 0px;
                }
                
           
                ::-webkit-scrollbar-button:vertical:end:increment {
                  background: #e8f0ff;
                  background-image: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png");
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 100% auto;
                  border: 1.5px solid #b3c9e6;
                  border-radius: 0px;
                }
                
                ::-webkit-scrollbar-button:horizontal {
                  width: 14px;
                }
              
                ::-webkit-scrollbar-button:horizontal:start:decrement {
                  background: linear-gradient(180deg, #e6f3ff, #e8f0ff);
                  background-image: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png");
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 100% auto;
                  border: 1.5px solid #b3c9e6;
                  border-radius: 0px;
                }
                
               
                ::-webkit-scrollbar-button:horizontal:end:increment {
                  background: linear-gradient(180deg, #e6f3ff, #e8f0ff);
                  background-image: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png");
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 100% auto;
                  border: 1.5px solid #b3c9e6;
                  border-radius: 0px;
                }
                </style>

Orange Scrollbar

♡

          
          <style>
            ::-webkit-scrollbar {
              width: 14px;
            }
            
            ::-webkit-scrollbar:horizontal {
              height: 14px;
            }
            
            ::-webkit-scrollbar-corner {
              background: #fff4e6;
            }
            
            ::-webkit-scrollbar-track:vertical {
              background: linear-gradient(90deg, #ffe9d6, #fff2e3);
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-track:horizontal {
              background: linear-gradient(180deg, #ffe9d6, #fff2e3);
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-thumb {
              border: 1.5px solid #e7bfa0;
              border-radius: 0px;
              box-shadow: inset 0 -1px 2px #fff, inset 0 1px 2px #fff;
            }
            
            ::-webkit-scrollbar-thumb:vertical {
              background: linear-gradient(90deg, #ffd9b8 40%, #ffe7cc 100%);
            }
            
            ::-webkit-scrollbar-thumb:horizontal {
              background: linear-gradient(180deg, #ffd9b8 40%, #ffe7cc 100%);
            }
            
            ::-webkit-scrollbar-button:horizontal:end:increment,
            ::-webkit-scrollbar-button:horizontal:start:decrement,
            ::-webkit-scrollbar-button:vertical:end:increment,
            ::-webkit-scrollbar-button:vertical:start:decrement {
              display: block;
            }
            
            ::-webkit-scrollbar-button:vertical {
              height: 15px;
            }
            
            ::-webkit-scrollbar-button:vertical:start:decrement {
              background: #ffe9d6;
              background-image: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #e7bfa0;
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-button:vertical:end:increment {
              background: #fff2e3;
              background-image: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #e7bfa0;
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-button:horizontal {
              width: 14px;
            }
            
            ::-webkit-scrollbar-button:horizontal:start:decrement {
              background: linear-gradient(180deg, #ffe9d6, #fff2e3);
              background-image: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #e7bfa0;
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-button:horizontal:end:increment {
              background: linear-gradient(180deg, #ffe9d6, #fff2e3);
              background-image: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #e7bfa0;
              border-radius: 0px;
            }
            </style>

Green Scrollbar

♡

        
        <style>
          ::-webkit-scrollbar {
            width: 14px;
          }
          
          ::-webkit-scrollbar:horizontal {
            height: 14px;
          }
          
          ::-webkit-scrollbar-corner {
            background: #ecffe9;
          }
          
          ::-webkit-scrollbar-track:vertical {
            background: linear-gradient(90deg, #e3ffe4, #f0fff3);
            border-radius: 0px;
          }
          
          ::-webkit-scrollbar-track:horizontal {
            background: linear-gradient(180deg, #e3ffe4, #f0fff3);
            border-radius: 0px;
          }
          
          ::-webkit-scrollbar-thumb {
            border: 1.5px solid #a8d7b0;
            border-radius: 0px;
            box-shadow: inset 0 -1px 2px #fff, inset 0 1px 2px #fff;
          }
          
          ::-webkit-scrollbar-thumb:vertical {
            background: linear-gradient(90deg, #c8ffd1 40%, #ddffe3 100%);
          }
          
          ::-webkit-scrollbar-thumb:horizontal {
            background: linear-gradient(180deg, #c8ffd1 40%, #ddffe3 100%);
          }
          
          ::-webkit-scrollbar-button:horizontal:end:increment,
          ::-webkit-scrollbar-button:horizontal:start:decrement,
          ::-webkit-scrollbar-button:vertical:end:increment,
          ::-webkit-scrollbar-button:vertical:start:decrement {
            display: block;
          }
          
          ::-webkit-scrollbar-button:vertical {
            height: 15px;
          }
          
          ::-webkit-scrollbar-button:vertical:start:decrement {
            background: #e3ffe4;
            background-image: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            border: 1.5px solid #a8d7b0;
            border-radius: 0px;
          }
          
          ::-webkit-scrollbar-button:vertical:end:increment {
            background: #f0fff3;
            background-image: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            border: 1.5px solid #a8d7b0;
            border-radius: 0px;
          }
          
          ::-webkit-scrollbar-button:horizontal {
            width: 14px;
          }
          
          ::-webkit-scrollbar-button:horizontal:start:decrement {
            background: linear-gradient(180deg, #e3ffe4, #f0fff3);
            background-image: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            border: 1.5px solid #a8d7b0;
            border-radius: 0px;
          }
          
          ::-webkit-scrollbar-button:horizontal:end:increment {
            background: linear-gradient(180deg, #e3ffe4, #f0fff3);
            background-image: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            border: 1.5px solid #a8d7b0;
            border-radius: 0px;
          }
          </style>

Purple Scrollbar

♡

          
          <style>
            ::-webkit-scrollbar {
              width: 14px;
            }
            
            ::-webkit-scrollbar:horizontal {
              height: 14px;
            }
            
            ::-webkit-scrollbar-corner {
              background: #f5eaff;
            }
            
            ::-webkit-scrollbar-track:vertical {
              background: linear-gradient(90deg, #f0e6ff, #f8f1ff);
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-track:horizontal {
              background: linear-gradient(180deg, #f0e6ff, #f8f1ff);
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-thumb {
              border: 1.5px solid #c3b0e6;
              border-radius: 0px;
              box-shadow: inset 0 -1px 2px #fff, inset 0 1px 2px #fff;
            }
            
            ::-webkit-scrollbar-thumb:vertical {
              background: linear-gradient(90deg, #e3d4ff 40%, #f0e6ff 100%);
            }
            
            ::-webkit-scrollbar-thumb:horizontal {
              background: linear-gradient(180deg, #e3d4ff 40%, #f0e6ff 100%);
            }
            
            ::-webkit-scrollbar-button:horizontal:end:increment,
            ::-webkit-scrollbar-button:horizontal:start:decrement,
            ::-webkit-scrollbar-button:vertical:end:increment,
            ::-webkit-scrollbar-button:vertical:start:decrement {
              display: block;
            }
            
            ::-webkit-scrollbar-button:vertical {
              height: 15px;
            }
            
            ::-webkit-scrollbar-button:vertical:start:decrement {
              background: #f0e6ff;
              background-image: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #c3b0e6;
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-button:vertical:end:increment {
              background: #f8f1ff;
              background-image: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #c3b0e6;
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-button:horizontal {
              width: 14px;
            }
            
            ::-webkit-scrollbar-button:horizontal:start:decrement {
              background: linear-gradient(180deg, #f0e6ff, #f8f1ff);
              background-image: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #c3b0e6;
              border-radius: 0px;
            }
            
            ::-webkit-scrollbar-button:horizontal:end:increment {
              background: linear-gradient(180deg, #f0e6ff, #f8f1ff);
              background-image: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png");
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100% auto;
              border: 1.5px solid #c3b0e6;
              border-radius: 0px;
            }
            </style>