How to Make a Transparent Scrollbar

Written by kayla lowe
  • Share
  • Tweet
  • Share
  • Email

Scrollbars appear on Internet browsers when the Web page becomes too long to fit on your computer's screen. You might not want the scrollbar to show up on your Web page. If you don't, all you have to do is to make your scrollbar transparent, which will hide it.

Skill level:

Things you need

  • Web page file

Show MoreHide


  1. 1

    Open the Web page file for which you want to make a transparent scrollbar.

  2. 2

    Copy and paste the following transparent scrollbar code within the body tags (<body> and </body>) of the Web page file's HTML coding:

    html {background-colour: #CEE7A3;

    scrollbar-shadow-colour: #CEE7A3;

    scrollbar-highlight-colour: #CEE7A3;

    scrollbar-face-colour: #CEE7A3;

    scrollbar-3dlight-color: #CEE7A3;

    scrollbar-darkshadow-colour: #CEE7A3;

    scrollbar-track-colour: #CEE7A3;

    scrollbar-arrow-colour: #CEE7A3;}

  3. 3

    Save your Web page file.

Tips and warnings

  • Internet browsers like Firefox and Netscape show scrollbars only when the Web page becomes too long to fit on the computer screen, whereas Internet Explorer shows a greyed-out scrollbar when the page fits on your computer screen.
  • Do not alter the code because your scrollbar will not be transparent if you do.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.