Gerador de barra de rolagem CSS

Gerador de barra de rolagem CSS: para que serve

Uma barra de rolagem nas cores da marca deixa o site com acabamento melhor, mas o CSS mudou: hoje existem as propriedades padrão scrollbar-color e scrollbar-width, aceitas pelo Firefox, pelo Chrome e Edge 121 e pelo Safari 26.2, enquanto as versões antigas só entendem ::-webkit-scrollbar.

Este gerador monta os dois jeitos separados por @supports, como recomenda a documentação do Chrome, porque quando scrollbar-color está definida o Chrome ignora as regras antigas. Você escolhe as cores do trilho e da barra, a largura, os cantos e a cor ao passar o mouse, e testa na caixa de exemplo.

Como usar

1. Escolha as cores do trilho e da barra.
2. Ajuste a largura e os cantos.
3. Copie o CSS para a página inteira ou para uma caixa.

Quando usar

• Barra de rolagem nas cores da marca.
• Caixas com rolagem dentro da página.
• Painéis e sistemas com tema escuro.

Perguntas frequentes

Funciona em todos os navegadores?

As propriedades padrão scrollbar-color e scrollbar-width funcionam no Firefox, no Chrome e no Edge a partir da versão 121 e no Safari 26.2. Para versões anteriores, o código traz também as regras ::-webkit-scrollbar, que mudam largura, cantos e cor ao passar o mouse.

Por que o código usa @supports?

No Chrome, quando scrollbar-color é definida, as regras ::-webkit-scrollbar são ignoradas. O @supports aplica as propriedades padrão só onde elas existem e deixa as regras antigas para os navegadores que não as conhecem.

Personalizar a barra atrapalha a acessibilidade?

Pode atrapalhar se ela ficar fina demais ou sem contraste com o trilho. Mantenha uma largura que dê para pegar com o mouse e uma cor que se destaque do fundo.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas