Propriedade Scrollbar Color
Última atualização: 2026-09-13
scrollbar-color Propriedade Scrollbar Color
A propriedade scrollbar-color personaliza a cor da barra de rolagem do navegador, tanto do thumb quanto da track. Faz parte da especificação CSS Scrollbars e oferece uma forma simples de combinar a barra de rolagem com a paleta geral da página sem plugins de JavaScript.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
scrollbar-color: auto | dark | light | <color> <color>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | dark | light | Palavra-chave | Um esquema de cores predefinido |
<color> <color> | Valor | As cores do thumb e da track |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scrollbar-color | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： scrollbar-color atualmente é suportada principalmente em navegadores baseados em Chromium e no Firefox; Safari e navegadores antigos precisam do pseudo-elemento ::-webkit-scrollbar.
Dica： Os dois valores de cor correspondem ao thumb e à track; se apenas um valor for informado, o navegador calcula o outro automaticamente.
❓ Perguntas Frequentes
QQual é a diferença entre scrollbar-color e ::-webkit-scrollbar?
Ascrollbar-color é uma propriedade padrão da W3C: duas cores especificam o thumb e a track — simples, mas só pode mudar cores e espessura. ::-webkit-scrollbar é um pseudo-elemento proprietário do WebKit/Chromium que também personaliza largura, arredondamento e bordas — muito mais capaz, porém não padrão. O Firefox usa a propriedade padrão; Chromium e Safari usam o pseudo-elemento.
QO que fazem os valores dark e light do scrollbar-color em CSS?
Adark instrui o navegador a renderizar a barra de rolagem em um tema escuro — um thumb escuro com uma track clara. light é o oposto: um thumb claro com uma track escura. As cores exatas são decididas pelo navegador conforme a plataforma e o tema, e são comumente usadas para combinar com o modo escuro. Se precisar de cores exatas, escreva dois valores de cor diretamente: o primeiro é o thumb, o segundo é a track.
QPor que scrollbar-color não funciona no Chrome ou no Safari?
AO Chrome passou a suportar scrollbar-color oficialmente a partir da versão 121 (antes disso, o Chromium usava apenas ::-webkit-scrollbar), e o Safari ainda não reconhece a propriedade padrão. Não há uma solução única entre navegadores para uma barra de rolagem uniforme: a propriedade padrão cobre o Firefox e o Chrome novo, enquanto o pseudo-elemento cobre o Safari e o Chrome antigo.
QComo fazer as cores da barra de rolagem funcionarem em todos os navegadores com CSS?
AUse uma abordagem de dois caminhos: primeiro defina as cores do thumb e da track com o scrollbar-color padrão para o Firefox (e o Chrome novo), depois estilize a barra de rolagem do WebKit com ::-webkit-scrollbar e ::-webkit-scrollbar-thumb. Se precisar de mais, recorra a uma biblioteca de barra de rolagem em JavaScript.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
