Watch the scrollbar changes live

Built for the Webflow Community.

Style your scrollbar visually

Copy/paste code to site settings.

Download the Chrome Extension

Try it live

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.

Download The Extension

/*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.

Try it Live

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.

Google Chrome Store listing

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;
  }
}

0
1
2
3
4
5
6
7
8
9

Download the F’in sweet Scrollbar Styler for Webflow.

No account needed. No cost to use.

Built for fun. Built for the Webflow Community.

Download the Chrome Extension

More Webflow tools coming soon.

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

Get more Finsweet products

Noice! Check your inbox!

Oops! Something went wrong while submitting the form.