Linear-gradient on scroll bar using Web Kit

[MasterLink1]

I need help with my code I am trying to make a rainbow gradient on a scroll bar using Web Kit. When using it the scroll bar is just white
CODE:

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

::-webkit-scrollbar-track {
  border-radius: 100vh;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(112, 241, 213), rgb(224, 101, 179), rgb(250, 229, 96) rgb(84, 184, 243) rgb(146, 96, 222));
  border-radius: 20px;
	outline: 1px solid black;
}

[MasterLink1]

What it looks like on the webview.

[CoderElijah]

@MasterLink1

on the webview

I don’t recommend you rely on the webview. It sometimes takes awhile to update and it’s so small anyway that unless you took the time to make your CSS mobile compatible it’s going to look bad in the webview. I open it in a new tab and refresh that tab when I run the Repl with new changes.

[MasterLink1]

I have tried both web view and “Open in New Tab”. Have any other ideas

[UMARismyname]

yeah, web view also has bugs which can mess with some apps

---

You missed a comma on line 10. I would personally write it as

  background: linear-gradient(#70f1d5, #e065b3, #fae560, #54b8f3, #9260de);

[Peterrrrrrr]

I would suggest writing it like this:

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    rgb(112, 241, 213),
    rgb(224, 101, 179),
    rgb(250, 229, 96),
    rgb(84, 184, 243),
    rgb(146, 96, 222)
  );
  border-radius: 20px;
}

In this version, I have:

• Put each property on its own line to improve readability
• Added indentation to the background property to make it clear that it is a gradient definition
• Removed the unnecessary outline property.

[MasterLink1]

Thanks for the help it worked.