15+ Scrollbar Styles: Customize Blogger Scrollbar With CSS

2. Go to the Theme > Edit HTML and find the ending “]]>

3. Grab your desired blogger scrollbar style code from the list below and paste it right above the “]]>

Scrollbar Style 1:

::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { border-radius: 10px; } ::-webkit-scrollbar-thumb { background-color: #ecf400; background: #BA8B02; background: -webkit-linear-gradient(to right, #181818, #BA8B02); background: linear-gradient(to right, #181818, #BA8B02); } ::-webkit-scrollbar-thumb:hover { background: #333; } ::-webkit-scrollbar-thumb:active { background: #000000; }

It is a very simple but stylish blogger scrollbar. Actually, the thumb of this scroll bar has a beautiful color combination with a slight Shadow effect. Moreover, The transparent track makes it more beautiful and eye catching.
Scrollbar Style 2:

::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; background: #1a2a6c; background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c); } ::-webkit-scrollbar-thumb:hover { background: #b21f1f; } ::-webkit-scrollbar-thumb:active { background: darkred; } ::-webkit-scrollbar-track { background: #e2e2e2; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); } ::-webkit-scrollbar-corner { background: transparent; }

Another gorgeous scrollbar which will suit with any type of blog. You will find an amazing color combination in between active and hover of this scrollbar. In addition, the track is visible for this style.
Scrollbar Style 3: Stripe

::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } ::-webkit-scrollbar-thumb { background-color: #6D6027; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent) } ::-webkit-scrollbar-thumb:active { background: #0B3B0B; } ::-webkit-scrollbar-track { background-color: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

This stripe scrollbar is an example of absolute beauty. Although it is not using any hover effect, the active thumb and the beautiful track makes it eye catching and user-friendly.
Scrollbar Style 4:

::-webkit-scrollbar{ width: 11px; } ::-webkit-scrollbar-track{ background: #c4c6c8; } ::-webkit-scrollbar-thumb{ background: #105B74; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); } ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:horizontal:hover{ background: #08A67C; }

It is another simple blogger scrollbar with rounded corners. The style is very popular and widely used. In fact, you may have already seen this kind of scroll bar on many blogs. For this reason, I am inspired to share this style.
Scrollbar Style 5:

::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 8px #00B141; } ::-webkit-scrollbar-thumb { background: yellowgreen; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:hover { background: green; } ::-webkit-scrollbar-thumb:active { background: #000; }

Actually, the design of this scrollbar is pretty similar to the above but you will find the difference in hover, active, and the track of the bar. Both the track and the thumb has rounded corners and a beautiful inset shadow effect which makes this scroll bar different from others.
Scrollbar Style 6: Google

::-webkit-scrollbar { background: transparent; width: 10px; } ::-webkit-scrollbar-thumb { background-color: #C2C2C2; box-shadow: inset 0 0 5px #AEAEAE; } ::-webkit-scrollbar-thumb:hover { background-color: #8A8A8A; } ::-webkit-scrollbar-thumb:active { background-color: #727272; box-shadow: inset 0 0 5px #595959; } ::-webkit-scrollbar-track:hover { background-color: #E6E6E6; border: 1px solid #CFCFCF; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 7: Codepen

::-webkit-scrollbar { background: transparent; width: 6px; } ::-webkit-scrollbar-thumb { background-color: #555; box-shadow: inset 0 0 2px #333; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 8: Blue-G

::-webkit-scrollbar { width: 10px; height: auto; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d)); background: -webkit-linear-gradient(#09123c, #0e3e8d); background: -moz-linear-gradient(#09123c, #0e3e8d); background: -o-linear-gradient(#09123c, #0e3e8d); background: -ms-linear-gradient(#09123c, #0e3e8d); background: linear-gradient(#09123c, #0e3e8d); } ::-webkit-scrollbar-thumb:hover { background: #0000a0; } ::-webkit-scrollbar-thumb:active { background: #000000; } ::-webkit-scrollbar-track { background: #e2e2e2; border: 0px none #ffffff; border-radius: 50px; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 9: Light Blue-G

::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd)); background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%); } ::-webkit-scrollbar-thumb:hover { background: #2E9AFE; } ::-webkit-scrollbar-thumb:active { background: #555; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 10: Green Shadow

::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f)); background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%); } ::-webkit-scrollbar-thumb:hover { background: #008542; } ::-webkit-scrollbar-thumb:active { background: #004522; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 11: Orange-G

::-webkit-scrollbar { width: 11px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff8a16), color-stop(0.79, #ffae5e), color-stop(0.51, #ff8916), color-stop(0.41, #ff9d3d), color-stop(0.00, #ffb268)); background: -webkit-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%); background: -moz-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%); background: -o-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%); background: -ms-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%); background: linear-gradient(to bottom, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%); } ::-webkit-scrollbar-thumb:hover { background: #FF9615; } ::-webkit-scrollbar-thumb:active { background: #904F00; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 12: Multi-Red Thin

::-webkit-scrollbar { width: 8px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #f60), color-stop(0.63, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.20, #ea2804)); background: -webkit-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%); background: -moz-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%); background: -o-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%); background: -ms-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%); background: linear-gradient(to bottom, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%); } ::-webkit-scrollbar-thumb:hover { background: red; } ::-webkit-scrollbar-thumb:active { background: darkred; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 13: Smooth Magenta

::-webkit-scrollbar { width: 12px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f600fe), color-stop(1.00, #fd63ff)); background: -webkit-linear-gradient(#f600fe, #fd63ff); background: -moz-linear-gradient(#f600fe, #fd63ff); background: -o-linear-gradient(#f600fe, #fd63ff); background: -ms-linear-gradient(#f600fe, #fd63ff); background: linear-gradient(#f600fe, #fd63ff); } ::-webkit-scrollbar-thumb:hover { background: #C60088; } ::-webkit-scrollbar-thumb:active { background: #6D024B; } ::-webkit-scrollbar-track { background: #F6E4F0; } ::-webkit-scrollbar-track:active { background: #FCC9EC; } ::-webkit-scrollbar-corner { background: transparent; }

Scrollbar Style 14: Silver Shine

::-webkit-scrollbar { width: 9px; height: auto; } ::-webkit-scrollbar-thumb { background: #0080ff; border: 0px none #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bdbbbb), color-stop(1.00, #777)); background: -webkit-linear-gradient(#bdbbbb, #777); background: -moz-linear-gradient(#bdbbbb, #777); background: -o-linear-gradient(#bdbbbb, #777); background: -ms-linear-gradient(#bdbbbb, #777); background: linear-gradient(#bdbbbb, #777); } ::-webkit-scrollbar-thumb:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #4b4b4b), color-stop(1.00, #131313)); background: -webkit-linear-gradient(#4b4b4b, #131313); background: -moz-linear-gradient(#4b4b4b, #131313); background: -o-linear-gradient(#4b4b4b, #131313); background: -ms-linear-gradient(#4b4b4b, #131313); background: linear-gradient(#4b4b4b, #131313); } ::-webkit-scrollbar-thumb:active { background: #111; } ::-webkit-scrollbar-track { background: #e2e2e2; } ::-webkit-scrollbar-corner { background: transparent; }

Generate Your Own Custom Scrollbar

Actually, we can modify the height, width, color, background, hover etc of a default browser scrollbar. If you have a little knowledge of CSS, you can easily design your own scrollbar style as the way you want. In fact, beginners can use 3-4 CSS selectors to customize it and put it inside their website’s style.css file.

::-webkit-scrollbar { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-track { }

bloggersorigin.com