Categoria: Desenvolvimento
Gerador de barra de rolagem CSS
Crie CSS de barras de rolagem personalizadas localmente, com prévia ao vivo
Projete barras de rolagem personalizadas com prévia ao vivo e copie o CSS de scrollbar-color, scrollbar-width e do estilo WebKit. Gerado no seu navegador.
Prévia
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color e scrollbar-width são as propriedades padrão e são o que o Firefox e o Chrome atual usam. As regras ::-webkit- são um prefixo não padronizado mantido para Chrome, Edge e Safari antigos — os dois motores não vão renderizar de forma idêntica.
Tanto a prévia quanto o CSS gerado são produzidos no seu navegador.
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
O estilo de barras de rolagem está dividido entre dois mecanismos. O módulo CSS Scrollbars Styling oferece `scrollbar-color` e `scrollbar-width`: duas propriedades, suporte amplo incluindo o Firefox e controle propositalmente limitado. Os pseudo-elementos `::-webkit-scrollbar`, mais antigos, dão bem mais, mas são um prefixo não padronizado. Este gerador emite primeiro as propriedades padrão e depois o bloco WebKit, identificado, para você ter ampla cobertura sem fingir que são a mesma coisa. Eles não vão renderizar de forma idêntica, e uma barra de rolagem é um controle do qual as pessoas dependem, então a prévia aqui rola de verdade em vez de mostrar um desenho.
Como usar
- Defina o seletor do elemento que quer estilizar e escolha as cores do indicador, do trilho e do hover.
- Escolha o scrollbar-width e ajuste a largura e o raio do WebKit.
- Role a prévia para conferir e copie o CSS.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Barras personalizadas funcionam em todos os navegadores?
- Não de forma idêntica. scrollbar-color e scrollbar-width funcionam no Firefox e no Chrome e Edge atuais; as regras ::-webkit- cobrem Chrome, Edge e Safari antigos. A ferramenta emite as duas, mas os dois motores desenham barras de rolagem de formas diferentes e nenhum CSS as iguala exatamente.
- O que é scrollbar-color?
- A propriedade padrão que define as cores do indicador e do trilho em uma única declaração — primeiro o indicador, depois o trilho. Faz parte do módulo CSS Scrollbars Styling, então é a versão por onde começar.
- Por que incluir CSS WebKit?
- Porque as propriedades padrão só expõem cor e uma largura aproximada, e porque versões antigas de WebKit e Blink não as suportam. As regras com prefixo acrescentam tamanho e raio explícitos e cobrem esses navegadores.
- Devo esconder a barra de rolagem por completo?
- Com cuidado. scrollbar-width: none remove uma pista visível de que a área rola e permite arrastar por ela, o que prejudica quem não usa roda do mouse nem trackpad. Considere uma barra fina e com bom contraste.