Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
change-the-style-of-the-scroll-bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<style>
* {
background-color: #2A0944;
height: 3000px;
font-family: 'Poppins', sans-serif;
color: #fff;
}
h1 {
display: flex;
justify-content: center;
align-items: center;
}
::-webkit-scrollbar {
width: 20px;
height: 20px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(
to bottom,
#607EAA,
#FF06B7);
border-radius: 50px;
}
::-webkit-scrollbar-track {
background: #474747;
}
</style>
<body>
<h1>Scrollbar Style</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment