Criar barras de rolagem CSS personalizadas

Crie barras de rolagem bonitas e modernas que combinam com o estilo do seu site com nosso gerador intuitivo. Não são necessárias habilidades de codificação!

Comece a personalizar Ver exemplos

Painel de controle

8px
0px

Preview

Conteúdo de visualização da barra de rolagem

Esta é uma área de demonstração para sua barra de rolagem personalizada. Ajuste as configurações à esquerda para ver as alterações em tempo real.

Feature 1

Barras de rolagem totalmente personalizáveis para sites e aplicativos modernos.

Feature 2

Suporte entre navegadores com prefixo automático para diferentes navegadores.

Exemplo de conteúdo de texto longo: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercition ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mais conteúdo textual: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Inteiro em mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Fim do texto: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Código CSS gerado

Copiado para a área de transferência!

Recursos poderosos

Totalmente personalizável

Ajuste todos os aspectos da sua barra de rolagem, incluindo largura, cores, raio e bordas para combinar perfeitamente com o design do seu site.

Suporte entre navegadores

Gere código CSS que funcione em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge.

Predefinições prontas para uso

Comece com designs profissionais usando nossa coleção selecionada de predefinições da barra de rolagem para implementação rápida.

Visualização em tempo real

Veja exatamente como sua barra de rolagem ficará ao fazer ajustes com nosso painel de visualização interativo.

Obtenha um código CSS mínimo e bem formatado que esteja pronto para ser integrado ao seu projeto sem qualquer inchaço.

Design responsivo

Crie barras de rolagem que se adaptam perfeitamente a diferentes tamanhos de tela e dispositivos para uma experiência de usuário consistente.

Modo de Utilização

1

Personalize sua barra de rolagem

Use o painel de controle para ajustar a largura, as cores, o raio e outras propriedades da barra de rolagem até que ela corresponda à sua visão de design.

2

Copie o CSS gerado

Quando estiver satisfeito com a visualização, clique no botão "Copiar CSS" para copiar o código gerado para a área de transferência.

3

Adicionar ao seu projeto

Cole o código CSS na folha de estilo do seu projeto ou use-o embutido. Aplique a classe a qualquer elemento para ver sua barra de rolagem personalizada em ação.

Exemplos de barra de rolagem

Exemplo de uma barra de rolagem azul moderna com cantos arredondados. Perfeito para sites e aplicativos corporativos.

Essa barra de rolagem usa uma faixa azul clara com um polegar azul mais escuro que muda de cor ao passar o mouse.

Role para baixo para ver o efeito completo. O polegar tem um raio de 5px para bordas arredondadas suaves.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Azul moderno

Uma barra de rolagem azul elegante com bordas arredondadas

Exemplo de uma barra de rolagem escura sutil com estilo mínimo. Ideal para sites com muito conteúdo.

Esta barra de rolagem usa uma faixa cinza muito clara com um polegar cinza médio que escurece ao passar o mouse.

Role para baixo para ver o efeito completo. O polegar tem um leve raio de 3px para bordas suaves.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Escuro sutil

Uma barra de rolagem escura minimalista para sites de conteúdo

Exemplo de uma barra de rolagem verde vibrante com estilo arrojado. Ótimo para sites ecológicos ou relacionados à saúde.

Esta barra de rolagem usa uma faixa verde clara com um polegar verde vívido que escurece ao passar o mouse.

Role para baixo para ver o efeito completo. O polegar tem um raio de 6px para bordas arredondadas pronunciadas.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Verde vibrante

Uma barra de rolagem verde em negrito para sites com temas ecológicos

Exemplo de uma barra de rolagem roxa elegante com design moderno. Perfeito para sites criativos ou de portfólio.

Esta barra de rolagem usa uma faixa roxa clara com um polegar roxo mais profundo que escurece ao passar o mouse.

Role para baixo para ver o efeito completo. O polegar tem um raio de 4px para bordas arredondadas limpas.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Roxo elegante

Uma barra de rolagem roxa moderna para projetos criativos

Perguntas frequentes

Related Tools

Conversor SCSS para CSS

Transforme seu código SCSS em CSS. Rápido, fácil e seguro.

Gerador de transição CSS3

Transição suave de opacidade

Gere transformações CSS3 com facilidade

Uma ferramenta poderosa e intuitiva para criar transformações CSS3 complexas sem escrever código. Visualize as alterações em tempo real e copie o CSS gerado para usar em seus projetos.

Decimal para Octal

Converta números decimais em octal sem esforço

Calculadora de taxas do PayPal

Calcule as taxas do PayPal para suas transações com nossa calculadora fácil de usar.

Binário para texto

Converta código binário em texto em inglês sem esforço