Gerador de Scrollbars CSS
Projete scrollbars personalizadas com CSS. Ajuste largura, cor da trilha, cor do polegar, raio da borda e efeitos ao passar. Visualização ao vivo e CSS pronto para copiar.
Scrollbar
Width10px
Thumb Border Radius5px
Track Border Radius0px
Thumb Border0px
Colors
Track Color
#f1f1f1
Thumb Color
#888888
Thumb Hover
#555555
Thumb Border Color
#ffffff
Preview
CSS Code
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Como Usar Gerador de Scrollbars CSS
- 1Ajuste a largura, cor da trilha e cor do polegar da barra de rolagem.
- 2Personalize o raio da borda e efeitos ao passar.
- 3Visualize a barra de rolagem no conteúdo de exemplo.
- 4Copie o código CSS para seu projeto.
ZenovayAnalytics
Saiba o que seus visitantes realmente fazem.
- Acompanhamento de visitantes em tempo real
- Privacidade em primeiro lugar, sem banner de cookies
- Configurado em dois minutos
Ferramentas Relacionadas
Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.Perguntas Frequentes
Como estilizo barras de rolagem com CSS?▾
Use pseudo-elementos ::-webkit-scrollbar para Chrome/Safari/Edge, e propriedades scrollbar-width/scrollbar-color para Firefox. Este gerador produz ambas as sintaxes.
Quais navegadores suportam scrollbars personalizadas?▾
Chrome, Edge e Safari suportam ::-webkit-scrollbar (85%+ dos usuários). Firefox 64+ suporta scrollbar-width e scrollbar-color. Cobertura combinada de ~97%.
Posso tornar as barras de rolagem transparentes?▾
Sim. Defina a largura da barra de rolagem para 0 e fundo transparente para WebKit, ou scrollbar-width: none para Firefox. O conteúdo continua rolável.
O CSS de scrollbar personalizado afeta o desempenho?▾
Impacto negligenciável. O estilo da barra de rolagem é aplicado uma vez por elemento, não por quadro. Até estilos complexos não têm efeito mensurável no desempenho.
Devo usar uma biblioteca JavaScript de scrollbar?▾
Barras de rolagem apenas em CSS são preferidas. Bibliotecas JS adicionam peso e podem causar problemas de acessibilidade. Use JS apenas quando CSS não conseguir atingir seu design.