MagicBar | Custom Scrollbar Code Generator

Instructions

Use the below controls to customize the browser's scrollbar and then copy the css to use in your own websites!

Note - I recommend trying out on different browsers to see how your scrollbar will be styled elsewhere.

Controls

  • (Firefox only)
  • px
  • px
  • px

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Scroll me...

Sometimes, the content of an element is bigger than the element itself, but you still want people to be able to see all of it, so you set the css of the element to overflow: scroll to add a scrollbar to it.

Then, to your horror, an ugly grey scrollbar is added to your page, which totally ruins the themeing you've worked so hard on, so what can you do?

Well... It turns out that many modern browsers have pseudo element selectors that you can use to style the scrollbars on your page, and seeing as it can be a bit of a pain reloading a page again and again to see what each one does, I figured why not make a simple little pen to let you style scrollbars live in the browser, and then copy the code to your own website once you're done.

A cute pug

Hey there, don't mind me. I'm just chilling down here.

Copy This Code

/* ===== Scrollbar CSS ===== */
    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
    }

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: orange;
    }

    *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
    }

Debugger


        

Custom Scrollbar Code Generator

Are you tired of the boring, default scrollbar on your website? Do you want to add some personality and flair to your pages? Look no further than our custom scrollbar code generator!

Our easy-to-use tool allows you to customize every aspect of your scrollbar, from the color and width to the border radius and more. Simply input your desired specifications, and our generator will create the <style> code you need to make your scrollbar look and function exactly how you want it to.

Not only does our code generator allow you to create a unique and visually appealing scrollbar, it can also improve the user experience on your website. With a customized scrollbar, users can easily navigate through your content and have a more enjoyable browsing experience.

But don't just take our word for it - try it out for yourself! Our code generator is free and easy to use, and the results speak for themselves. With just a few clicks, you can have a custom scrollbar that perfectly matches your website's design and style.

So what are you waiting for? Create your perfect scrollbar today with our custom code generator. And don't forget to add the code snippet at the bottom of your website to make it easy for others to find and use!