15+ Scrollbar Styles: Customize Blogger Scrollbar With CSS

If you wish to customize blogger scrollbar to give your blog an attractive look, this list will let you do that with simple CSS. In fact, you are also going to have some blogger scrollbar styles to implement in your blog within few clicks. You may have already seen that many web icons like Google and Facebook are using their own custom scrollbar to their website. Accordingly, you can also make your blog looks different with this little modification.

Actually, a unique look is important to improve the user experience of our blog. Implementing one of the following stylish blogger scrollbar designs will give an additional improvement of your blog’s overall beauty. As a matter of fact, if you are not a web designer, you can simply grab any of the following blogger scrollbar styles. Moreover, I will suggest an amazing tool to generate your own custom scrollbar at the end of this post. Now let’s come to the point.

How to Customize Blogger Scrollbar with CSS?

It is very easy to customize the default browser scrollbar. Actually, most of the third party blogger template developer does not implement a custom scrollbar in their template. So you have to do it by yourself. Simply follow the following step-by-step instruction:

1. First of all, login to your Blogger account.

2. Go to the Theme > Edit HTML and find the ending “]]></b:skin>” code.

3. Grab your desired blogger scrollbar style code from the list below and paste it right above the “]]></b:skin>” as shown above.

4. Finally, click on the “Save Theme” button and visit your blog to see the scroll bar in action.

List of Stylish Blogger Scrollbar:

Usually, we see a gray scrollbar by default for many modern browsers like Google Chrome, Firefox, Microsoft edge etc. We are going to change that. Simply pick any scrollbar style from this list and put it into the blogger blog as I have shown above.

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 {
}

These are three basic CSS selectors to customize any WebKit based browser scrollbar. Basically, you can declare the width of the scrollbar inside the first CSS selector. Secondly, you can style the bar/thumb inside the second CSS block and finally, you can style the track of the scrollbar inside the third CSS selector.

Related:

Stylish Search Boxes for Blogger (Bootstrap Style)

Customize Blockquote in Blogger with CSS (30+ designs)

If you don’t have any idea about CSS but need to generate a unique scrollbar style for your blog, I will recommend you to use this tool. Otherwise, choose one of the above blogger scrollbar styles and give your blog a unique look. All of the above scrollbars are tested but still if you have any trouble, leave a comment to get support. Also, don’t forget to share this list to support me.