Gerador de Scrollbar Personalizada

Personalize cor, largura e cantos da barra de rolagem do navegador.

Componentes

Role esta área para visualizar a barra de rolagem personalizada.

Ajuste largura, cor da trilha e cor do polegar (thumb) no painel ao lado.

O CSS abaixo é copiável e funciona em qualquer elemento com overflow.

Chrome, Edge e Safari usam ::-webkit-scrollbar; Firefox usa scrollbar-color/width.

Fim do conteúdo de exemplo.

 estilo.css

::-webkit-scrollbar

Pseudo-elemento suportado por navegadores baseados em Chromium e pelo Safari, que permite estilizar trilha, polegar e cantos da barra de rolagem.

scrollbar-color / scrollbar-width

Alternativa padrão suportada pelo Firefox — mais limitada (apenas cor e espessura 'thin'/'auto'), mas necessária para cobertura cross-browser.

Perguntas frequentes

Funciona em todos os navegadores?

Não totalmente — combine as duas abordagens (::-webkit-scrollbar e scrollbar-color) como fizemos aqui para cobrir Chrome, Edge, Safari e Firefox.

Posso aplicar isso no body inteiro?

Sim, use html ou body como seletor em vez de um elemento específico.

Scrollbar customizada afeta a acessibilidade?

Evite reduzir demais a largura — uma barra muito fina pode dificultar o uso por pessoas com dificuldade motora fina.