Watch the scrollbar changes live
Built for the Webflow Community.

Style your scrollbar visually

Copy/paste code to site settings.

Try it live
HEX
R
G
B
A
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Scrollbar width
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Scrollbar width
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Full control over scrollbar styles

Customize -webkit-scrollbar width, track, and thumb visually in a Webflow-like environment.

Scrollbar Width
Color
Border
Border Radius
Shadow

Generate clean CSS styles to use in your Webflow project

Add your styles to the body or any div set to overflow: scroll or auto on your website.

Generate your custom css
CSS
/*width*/
{
  ::-webkit-scrollbar: {
     width: auto;
  }
}

/*track*/
{
  ::-webkit-scrollbar-track: {
     box-shadow: inset 0 0 5px grey;
     border-radius: 10px;
  }
}

/*thumb*/
{
  ::-webkit-scrollbar-thumb: {
     background: red;
     border-radius: 10px;
  }
}
Copy Generated CSS
View generated CSS
1-click copy your code
Paste into Site Settings.
Powered for
Webflow developers.
So simple a Squarespace developer could do it.
/*width*/
{
  ::-webkit-scrollbar: {
     width: auto;
  }
}

/*track*/
{
  ::-webkit-scrollbar-track: {
     box-shadow: inset 0 0 5px grey;
     border-radius: 10px;
  }
}

/*thumb*/
{
  ::-webkit-scrollbar-thumb: {
     background: red;
     border-radius: 10px;
  }
}

Automatically save and access existing scrollbar stylings

Powered for Webflow developers and so simple a Squarespace developer could do it.

Save and remove styles
Create a New Scrollbar
Scrollbar style 01
Scrollbar style 02
Scrollbar style 03

Packed into a lightweight free Google Chrome extension

Download the extension and start styling. No bullshit. Just straight fire sauce.

"This is really awesome”
Duncan Hamra
Co-Founder, MemberStack
Nobody else has seen it.... email us at projects@finsweet.com and we'll add you here
Your name
Your company name
/*width*/
{
  ::-webkit-scrollbar: {
     width: auto;
  }
}

/*track*/
{
  ::-webkit-scrollbar-track: {
     box-shadow: inset 0 0 5px grey;
     border-radius: 10px;
  }
}

/*thumb*/
{
  ::-webkit-scrollbar-thumb: {
     background: red;
     border-radius: 10px;
  }
}

2
0
1
2
3
4
5
6
7
8
9
px
1
0
1
2
3
4
5
6
7
8
9
px

Download the F’in sweet Scrollbar Styler for Webflow.

No account needed. No cost to use.

Built for fun. Built for the Webflow Community.

More Webflow tools coming soon.

The Finsweet team is building more stuff for the Webflow community.

Stay Updated

Stay Updated
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.