6XC

Gerador de Scrollbar CSS

Crie uma barra de rolagem colorida personalizada com pré-visualização ao vivo e copie o CSS — compatível com WebKit e Firefox.

740 visualizações

Esta área serve para testar sua barra de rolagem personalizada. Role para baixo e veja a barra à direita seguir seu design. Altere cores e tamanhos; o resultado é aplicado a esta caixa instantaneamente.

Esta área serve para testar sua barra de rolagem personalizada. Role para baixo e veja a barra à direita seguir seu design. Altere cores e tamanhos; o resultado é aplicado a esta caixa instantaneamente.

Esta área serve para testar sua barra de rolagem personalizada. Role para baixo e veja a barra à direita seguir seu design. Altere cores e tamanhos; o resultado é aplicado a esta caixa instantaneamente.

Esta área serve para testar sua barra de rolagem personalizada. Role para baixo e veja a barra à direita seguir seu design. Altere cores e tamanhos; o resultado é aplicado a esta caixa instantaneamente.

Esta área serve para testar sua barra de rolagem personalizada. Role para baixo e veja a barra à direita seguir seu design. Altere cores e tamanhos; o resultado é aplicado a esta caixa instantaneamente.

Esta área serve para testar sua barra de rolagem personalizada. Role para baixo e veja a barra à direita seguir seu design. Altere cores e tamanhos; o resultado é aplicado a esta caixa instantaneamente.

Como as Scrollbars São Estilizadas com CSS?

Existem dois mecanismos: os navegadores WebKit (Chrome, Edge, Safari) usam a família de pseudo-elementos ::-webkit-scrollbar, que permite estilizar trilho, marcador (thumb), largura e raio; o Firefox usa as propriedades padrão mais simples scrollbar-color e scrollbar-width. O código gerado inclui ambos, para que sua barra de rolagem fique consistente em todos os lugares.

Ajuste cores, largura e raio; o painel de pré-visualização à direita rola com seu design aplicado, e o CSS é atualizado instantaneamente.

Perguntas Frequentes

Por que minha barra de rolagem aparece diferente no Firefox?

O Firefox ignora as regras ::-webkit-scrollbar e respeita apenas scrollbar-color (cores do marcador e do trilho) e scrollbar-width. Raio e efeitos de hover são exclusivos do WebKit; o Firefox mostra uma versão simplificada.

Posso estilizar a barra de rolagem de apenas um elemento?

Sim — delimite os seletores: .minha-caixa::-webkit-scrollbar { … } e .minha-caixa { scrollbar-color: … }. Aplique em html ou body (ou use os seletores simples deste gerador) para a página inteira.

Barras de rolagem personalizadas funcionam no celular?

Na maioria das vezes não: iOS e a maioria dos navegadores Android usam barras de rolagem sobrepostas que ignoram esses estilos. Trate as barras de rolagem personalizadas como um aprimoramento para desktop.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar