search

Found

info Visão geral

Ajuste largura 2–30, raio 0–20 e três cores com sliders para gerar CSS ::-webkit-scrollbar e scrollbar-color ao vivo.

📘 Como usar

  1. Ajustar a largura e o arredondamento das bordas do scrollbar através dos controles deslizantes
  2. Definir as cores do polegar (thumb), estado de hover e trilha (track) usando o seletor ou código hexadecimal
  3. Visualizar o resultado em tempo real no painel de pré-visualização

Gerador de CSS para barra de rolagem (Webkit + Firefox)

#Configurações

12px
6px

#Pré-visualização e Código

A barra de rolagem desta área muda em tempo real. Role para verificar o resultado.

As barras de rolagem são um elemento importante que afeta significativamente a usabilidade de sites e aplicativos. Ao personalizá-las com CSS, você pode obter um design consistente em diferentes navegadores.

Navegadores baseados no Webkit (Chrome, Safari, Edge) permitem um controle detalhado por meio de pseudoelementos. Você pode ajustar livremente a cor do cursor da barra (thumb), o fundo da trilha, o raio da borda e muito mais.

O Firefox usa as propriedades scrollbar-width e scrollbar-color para uma personalização simples. Embora não ofereça tanto controle quanto o Webkit, atende às principais necessidades de estilo.

Para sites com tema escuro, combinar a barra de rolagem com o tema cria uma experiência visual mais coesa e evita que uma barra clara se destaque do design.

Ajuste os controles deslizantes e seletores de cor no painel esquerdo e observe a barra de rolagem mudar em tempo real. Quando estiver satisfeito com o resultado, copie o código CSS gerado.

Em navegadores móveis, barras de rolagem sobrepostas são comuns, o que pode ocultar estilos personalizados. Recomendamos verificar em navegadores desktop.

Copiado! 

    

  




            


            
            

            

            
            

                

                    grid_view Relacionados
                

                
            


        


        
        
    


    
    
    

        
        

            

            Article
            

        


        
        

            
Gerador de Scrollbar CSS Personalizado ｜ Pré-visualização e Código


Esta ferramenta permite que desenvolvedores e web designers criem barras de rolagem (scrollbars) personalizadas com CSS puro, gerando automaticamente o código compatível com navegadores Webkit e Firefox. É a solução ideal para quem busca alinhar a interface do usuário (UI) com a identidade visual do projeto, mantendo a responsividade e a alta performance.


💡 Sobre a Ferramenta


    

  • Ajuste de Dimensões: Controle a largura da barra de rolagem (de 2px a 30px) e o arredondamento das bordas (border-radius) com controles deslizantes precisos.
    • 

  • Personalização de Cores: Defina cores através de seletor visual ou código hexadecimal para o thumb (a barra que se move), o estado hover e o track (o trilho de fundo).
    • 

  • Pré-visualização em Tempo Real: Valide visualmente como sua barra de rolagem se comportará diretamente no navegador antes de implementar no código da aplicação.
    • 

  • Código Cross-Browser: Gera instantaneamente o snippet CSS utilizando pseudo-elementos ::-webkit-scrollbar (para Google Chrome, Safari, Microsoft Edge) e as propriedades nativas scrollbar-width e scrollbar-color (para Mozilla Firefox).
    • 

  • Processamento 100% Local: Os dados e configurações não são enviados para nenhum servidor. Todo o processamento e a geração do código ocorrem exclusivamente no seu navegador.
    • 



🧐 Perguntas Frequentes


Q. Qual é a largura ideal para uma barra de rolagem?


A. Em termos de usabilidade e acessibilidade para interfaces desktop, recomenda-se uma largura entre 10px e 12px, garantindo que o usuário consiga clicar e arrastar com o mouse sem dificuldade. Larguras muito finas (abaixo de 6px) devem ser restritas a elementos internos sutis ou interfaces focadas inteiramente em dispositivos touch, onde o usuário realiza o scroll arrastando o próprio conteúdo.


Q. O código gerado funciona em todos os navegadores modernos?


A. Sim, o código gerado abrange a grande maioria dos cenários atuais. A declaração ::-webkit-scrollbar atende Chrome, Edge, Safari e Opera. Para o Firefox, a ferramenta gera as diretrizes scrollbar-width e scrollbar-color. Vale notar que os motores Webkit oferecem maior liberdade de estilização (como border-radius no thumb), enquanto o Firefox segue as especificações mais estritas da W3C.


Q. Por que o border-radius e o hover não se aplicam no Firefox?


A. O Firefox não suporta pseudo-elementos detalhados para scrollbars de forma intencional. As propriedades padrão estipuladas pela W3C permitem apenas definir a espessura (valores "auto" ou "thin") e duas cores básicas (thumb e track). O código gerado aplica as configurações visuais complexas, como hover e border-radius, apenas onde há suporte nativo da engine (Webkit).


📚 Curiosidade: A Evolução do Scrollbar CSS


A padronização da estilização de scrollbars tem sido um debate de longa data na comunidade front-end. Originalmente, o Internet Explorer introduziu propriedades proprietárias de cor (como scrollbar-face-color) no início dos anos 2000. Mais tarde, a Apple introduziu o pseudo-elemento ::-webkit-scrollbar no Webkit, que se tornou extremamente popular devido ao seu controle granular, permitindo estilizar botões, trilhas e estados de interação. 


No entanto, o consórcio W3C decidiu seguir um caminho mais simplificado e seguro em termos de performance para o padrão oficial CSS Scrollbars Module Level 1, introduzindo apenas propriedades de alto nível. É por isso que desenvolvedores de interface hoje precisam manter duas sintaxes distintas. Esta ferramenta centraliza a criação dessas regras, gerando os fallbacks adequados para garantir uma experiência consistente na sua aplicação.