---
name: css-custom-scrollbar-designer
description: "Generate cross-browser CSS code to style your website's scrollbars. Use when the user wants help with CSS Custom Scrollbar Designer. Related topics: design, css, coding."
---

# CSS Custom Scrollbar Designer

Generate cross-browser CSS code to style your website's scrollbars.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Thumb Color (The moving part)** (free text, e.g. "Hex code")
- **Track Color (The background)** (free text, e.g. "Hex code")
- **Scrollbar Width/Thickness (px)** (number from 1 to 30)
- **Add rounded corners to the thumb?** (choose one: Yes, No)
- **Add a hover effect to the thumb?** (choose one: Yes, No)
- **Target Browsers** (choose any: WebKit (Chrome/Safari), Firefox (scrollbar-color))

## Prompt template

## Introduction
Create a beautiful, custom scrollbar for your web project.

## Scrollbar Aesthetics
- Thumb Color (The moving part): {{Thumb Color (The moving part)}}
- Track Color (The background): {{Track Color (The background)}}
- Scrollbar Width/Thickness (px): {{Scrollbar Width/Thickness (px)}}

## Advanced Features
- Add rounded corners to the thumb? {{Add rounded corners to the thumb?}}
- Add a hover effect to the thumb? {{Add a hover effect to the thumb?}}
- Target Browsers: {{Target Browsers}}

---
**Goal**: Output the raw CSS code required to style the scrollbar across major browsers.

---

Source: [CSS Custom Scrollbar Designer on PromptBuild](https://promptbuild.io/prompt/2MqgzyF3jaoWKCCdWk4i/css-custom-scrollbar-designer)