How to create custom scrollbars in WebKit

| Last Updated: | In: Freebies, HTML / CSS

In my recent project, client ask to create custom scrollbars using webkit for all browsers like google chrome, Mozilla Firefox, Safari, IE and etc. Now days -webkit is back with nice styles. You can design your browser’s scrollbar by simply applying the peace of -webkit css code.

What is webkit?

WebKit is a layout engine software component for rendering web pages in web browsers. By using webkit you can design scrollbar of your browsers.


See Live Webkit Example

you can also customized scrollbars of your browsers using WebKit Scrollbar css. Below is the complete example. By using below css you can design scrollbars of your browsers. Copy and paste below css code in your style.css file.

After adding the above css snippets in your style.css file you will see the effect of added css code. Your browser’s scrollbars will be designed very nice. See the Output of above webkit css code.

Tags: , , , , , , ,

About: Prem Tiwari

Prem Tiwari is the founder of and is a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby.

You may also like:

Follow us!

Get Free Access of 400+ Scripts

Don't worry you'll not be spammed!

Featured eBook

WordPress Security Guide

Free Guide: Learn how to implement security guideline in your WordPress site...


Pincode Finder

pincode-finder tool

Online Pincode Finder

Best tool to locate post Office address and pincodes of all india...