📜 Gerador de Estilos de Barra de Rolagem CSS (Scrollbar Styler)
Personalize cores, largura e arredondamento para navegadores modernos W3C e WebKit (Chrome, Edge, Safari)
Teste sua barra de rolagem personalizada em tempo real!
Esta caixa de texto foi configurada para demonstrar imediatamente as cores, espessura e suavidade da barra de rolagem que você acabou de personalizar.
As barras de rolagem customizadas tornam a experiência do usuário muito mais imersiva, combinando a navegação com o design do seu site ou tema Dark Mode.
O código gerado inclui tanto o padrão oficial da W3C (CSS Scrollbars Module Level 1) com as propriedades scrollbar-color e scrollbar-width quanto as pseudo-classes legadas do motor WebKit (::-webkit-scrollbar), garantindo 100% de compatibilidade em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera).
Continue rolando para verificar o comportamento do topo até o fim do documento. Passe o cursor sobre a barra para testar a cor de hover!
Fim da caixa de demonstração. Você pode copiar o código CSS gerado abaixo.
/* Código CSS da Barra de Rolagem */
📑 Índice do Conteúdo
Como Personalizar a Barra de Rolagem com CSS Puro
A personalização da barra de rolagem (Scrollbar) é um detalhe crucial no design de interfaces modernas, especialmente em portais com paletas escuras (Dark Mode), onde a barra de rolagem cinza padrão do sistema operacional quebra a imersão visual.
O Gerador de Barra de Rolagem do Web-ZoneWare permite customizar a cor do puxador (thumb), a cor do efeito ao passar o mouse (hover), a cor da calha de fundo (track), a largura em pixels e o raio de arredondamento das bordas. O gerador produz código universal combinando o padrão oficial W3C (scrollbar-color e scrollbar-width) com os pseudo-elementos legados do motor WebKit (::-webkit-scrollbar).
Tabela de Compatibilidade entre Motores de Navegadores
| Padrão | Propriedades Utilizadas | Navegadores Suportados |
|---|---|---|
| W3C Moderno (Oficial) | scrollbar-color: #thumb #track;scrollbar-width: thin | auto | none; |
Firefox 64+, Chrome 121+, Edge 121+, Safari 17.4+ |
| WebKit Pseudo-Elements | ::-webkit-scrollbar::-webkit-scrollbar-thumb::-webkit-scrollbar-track |
Google Chrome, Microsoft Edge, Opera, Safari, Brave e navegadores Chromium |
Exemplo de Código CSS Completo e Compatível
/* 1. Suporte Universal Moderno */
* {
scrollbar-width: thin;
scrollbar-color: #0284c7 #0f172a;
}
/* 2. Suporte Granular WebKit */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #0f172a;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #0284c7;
border-radius: 6px;
border: 2px solid #0f172a;
}
::-webkit-scrollbar-thumb:hover {
background-color: #38bdf8;
}
Perguntas Frequentes sobre Personalização de Barra de Rolagem (FAQ)
Como aplicar a barra personalizada apenas em uma caixa específica do meu site?
Em vez de aplicar no seletor global *, substitua o asterisco pela classe do seu container específico: por exemplo, .chat-box { scrollbar-color: #0284c7 #0f172a; } .chat-box::-webkit-scrollbar { width: 8px; }.
Por que a barra de rolagem não muda de cor no Firefox antigo?
As versões antigas do Firefox não suportam os seletores com prefixo ::-webkit-scrollbar. No entanto, desde a versão 64, o Firefox suporta o padrão oficial da W3C scrollbar-color, que é plenamente gerado por esta ferramenta.
Como ocultar totalmente a barra de rolagem permitindo que o usuário continue rolando?
Basta declarar: scrollbar-width: none; (para Firefox) e ::-webkit-scrollbar { display: none; } (para navegadores Chromium). O conteúdo continuará rolável via scroll do mouse ou toque na tela.
A personalização da barra afeta o tempo de carregamento da página?
Não. Trata-se de código CSS puro ultraleve com menos de 1 KB, sem qualquer dependência de bibliotecas de terceiros como jQuery ou plugins pesados de scroll.
