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.
Built for
Webflow developers.
So simple a Squarespace user 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.

I have a scrolling side menu card on my website and it would look ugly with a default scroll bar. But thanks to F'in sweet it looks awesome!
Igor
Founder, Dev Academy
"This is really awesome”
Duncan Hamra
Co-Founder, MemberStack
Add an extra touch of quality for Webflow projects!
Mateusz Wierzbicki
Co-Founder, SystemFlow
/*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.

Get more Finsweet products

Stay Updated
Noice! Check your inbox!
Oops! Something went wrong while submitting the form.