DEV Community

Cover image for How to create an interactive gradient scrollbar
Stavros Ioannidis
Stavros Ioannidis

Posted on • Originally published at istavros.dev

1

How to create an interactive gradient scrollbar

I was recently working on implementing a new design for a project. The site branding had two main colors, and, even though it was not in the design, I thought I would change the scrollbar background to the primary branding color.

It was better than the default browser scrollbar, but I had the idea to make it even better. So I decided to make a gradient scrollbar using the two branding colors. But having the scroll thumb with this gradient background wasn’t enough either… so I decided to make it more interactive.

My Idea was as you scroll, the scroll thumb background should change, starting from the primary and ending with the secondary branding colors.

This is how I did it. This works only on WebKit browsers of course.

First lets see the default scrollbar

I changed from that to only having a solid color scroll thumb

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
  border: 3px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode

Next step is to make the gradient. I set the gradient background to the scroll track.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Then I tried to create a scroll thumb with a “hole” to reveal the gradient background.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 0 10px 10px 0;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  border: 3px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode

And now the only thing missing is to hide the rest of the scroll track. I used a really large outline on the scroll thumb for that.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  border: 3px solid #fff;
  outline: 99999px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode

And this is the final result

If you liked this small tip, share it with your friends…

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more