← Back To Home

Day 16 — Custom Scroll Bar

Custom CSS Scrollbars

Four handcrafted scrollbar styles built with pure CSS. Scroll inside each box to preview the effect. No JavaScript required.

Scrollbar Variants

Purple Gradient

Scrollbars can be fully customised using the webkit scrollbar CSS properties. This variant uses a purple to violet gradient giving it a modern and sleek look. Keep scrolling to see the thumb in full motion. The track stays dark while the thumb glides smoothly along the rail. This is one of the most popular scrollbar styles used in dark themed developer tools and portfolio websites.

Cyan Neon

This variant uses a cyan neon color scheme that works well with dark backgrounds. It gives a futuristic and tech focused appearance commonly seen in hacker themed UI designs. The scrollbar thumb has a soft glow feel when combined with a dark track. Scroll through this box to experience how the thumb transitions from a deep cyan to a bright aqua tone on hover.

Pink Rose

The pink rose variant brings a soft and elegant aesthetic to the scrollbar. This style is commonly used in creative portfolios, beauty or fashion themed websites, and any UI that targets a softer visual language. The gradient runs from a deep pink to a light blush making it feel warm and inviting. Scroll down inside this box to see the thumb travel along the dark track.

Amber Gold

Amber gold scrollbars add a premium and luxurious feel to any dark themed interface. This variant is well suited for finance dashboards, luxury brand websites, and editorial content platforms. The gradient moves from a warm amber to a bright golden yellow creating a rich and confident look. Scroll through this box to see the thumb animate from top to bottom.

How It Works

/* Custom scrollbar using CSS only */

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

::-webkit-scrollbar-track {
  background: #111;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6c63ff, #a78bfa);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}