Gerador de Estilo de Scrollbar CSS
Gere CSS de scrollbar personalizado entre navegadores — regras WebKit ::-webkit-scrollbar-* plus scrollbar-color/scrollbar-width do Firefox — a partir de configurações de largura, trilha, polegar e canto, com uma visualização ao vivo real que você pode rolar.
Entrada
Largura
Cores
Apenas visível onde a scrollbar vertical e horizontal se encontram.
Forma e markup
Insere o polegar da trilha com um anel de cor da trilha, para que pareça estar flutuando.
Aplique essa classe a qualquer elemento com overflow — cada selector tem escopo sob ela.
Saída
Your scrollbar will appear here.
O CSS realmente gerado, isolado em um Shadow DOM — role a caixa para vê-lo.
Uma caixa rolável com a classe aplicada — substitua a altura/conteúdo com a sua própria.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-scrollbar-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"widthPreset": "thin",
"customWidth": "12",
"trackColor": "#f1f5f9",
"thumbColor": "#94a3b8",
"thumbHoverColor": "#64748b",
"cornerColor": "#f1f5f9",
"trackRadius": "8",
"thumbRadius": "8",
"floatingThumb": "true",
"className": "io-scrollbar"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-scrollbar-style-generator` tool (CSS Scrollbar Style Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-scrollbar-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Estilo de Scrollbar CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
Os navegadores não concordam sobre como estilizar uma scrollbar. Chrome, Safari e Edge usam um conjunto de pseudo-elementos ::-webkit-scrollbar-*; Firefox ignora todos esses e em vez disso lê duas propriedades shorthand, scrollbar-width e scrollbar-color. Esta ferramenta cria ambas de uma vez a partir de alguns controles — largura, cor da trilha, cor do polegar, cor de hover, cor do canto e raio do canto — e mostra a você uma visualização real e rolável para que possa ver o resultado antes de copiar nada.
Como usar
- Escolha uma Largura da Scrollbar — Fino, Automático (a largura padrão do navegador recolorida), um valor de pixel Personalizado ou Oculto.
- Configure as cores Trilha, Polegar, Polegar ao Passar e Canto.
- Ajuste o Raio da Trilha e Raio do Polegar, e alterne Polegar flutuante para um polegar inserido da trilha por um anel de cor da trilha.
- Dê um Nome de Classe, depois role a visualização ao vivo para verificar.
- Copie o CSS para sua folha de estilos e aplique o nome da classe a qualquer elemento com
overflow: autoouoverflow: scroll.
Por que o CSS precisa de um bloco WebKit e um bloco Firefox?
Não existe ainda uma única API padrão para estilizar scrollbars. Navegadores baseados em WebKit expõem a scrollbar como cinco pseudo-elementos estilizáveis (::-webkit-scrollbar, -track, -thumb, -thumb:hover, -corner); Firefox implementa as propriedades scrollbar-width/scrollbar-color mais novas e muito mais simples e não suporta os pseudo-elementos WebKit. Usar apenas uma metade deixa um mecanismo de navegador inteiro com a scrollbar padrão sem estilo, então o CSS gerado sempre inclui ambas.
Por que Firefox não pode usar minha largura de pixel personalizada?
scrollbar-width aceita apenas três palavras-chave — auto, thin, none — não há propriedade para um valor exato de pixel. Quando você escolhe largura Personalizado, Firefox volta para thin, que é a opção mais próxima disponível.
Isso afetará scrollbars em outro lugar na minha página?
Não. Cada regra está com escopo sob o nome de classe escolhido, então apenas elementos aos quais você aplica essa classe são afetados — o resto da página mantém sua scrollbar nativa.
E se eu quiser ocultar a scrollbar completamente?
Escolha a predefinição de largura Oculto. Define scrollbar-width: none para Firefox e display: none no pseudo-elemento scrollbar WebKit, para que o elemento ainda role (com roda do mouse, toque ou script) mas não mostre nenhuma trilha ou polegar de scrollbar.
E se eu precisar de um efeito de scroll completamente diferente?
Para animações acionadas por scroll em vez de aparência de scrollbar, veja o CSS Scroll-Driven Animation Generator. Para arredondar os cantos da caixa rolável em si em vez de sua scrollbar, use o CSS Border Radius Generator.