🍭 CSS | Barra de rolagem colorida com ::webkit-scrollbar

Tutorial atualizado dia 14/05/2022.

Aqui temos um exemplo de barra de rolagem (scrollbar) colorida que deve funcionar no Google Chrome e em outros navegadores desktop que usam webkit.

14/04/2025 | Para um método mais atual e que funciona em todos os navegadores, use scrollbar-color.

Não será possível ver nenhum dos exemplos aplicados aqui no blog por causa do conflito com a propriedade que usamos atualmente, mas você consegue ver os exemplos aplicados em outro site.

Este post poderia ter sido publicado mais cedo, só que eu fiquei empolgada testando 1001 peruices com o código e criando exemplos. Adoro barra de rolagem colorida! #prontoconfessei

Para quem ainda é inocente na internet (sabe de nada), esse recurso era muito comum no fim da década de 90 e no início da década passada. Blogueiros e webdesigners (me incluo) usaram e abusaram das barras de rolagem coloridas, até que ficou demodê. Mas, como todo mundo que tem mais de 20 anos já notou, tudo que fica demodê depois de um tempo fica vintage e daí vira moda de novo.

Você consegue essa modificação usando pseudo-elementos CSS. O código é o seguinte:

::-webkit-scrollbar {background: #99cc00;} /* barra de rolagem toda */ ::-webkit-scrollbar-thumb {background: #ff00ff;} /* parte da barra que se movimenta */ ::-webkit-scrollbar-button {background:#00ff00;} /* ponta da barra de rolagem */ ::-webkit-scrollbar-track {background:#ffff00;} /* fundo da barra de rolagem, parte fixa */ ::-webkit-scrollbar-track-piece {background:#00ffff;} /* fundo da barra de rolagem, parte que ainda falta rolar */ ::-webkit-scrollbar-corner {background:#99cc00;} /* canto inferior direito da barra de rolagem */

Lembrando que é um código CSS, logo tem que ficar na folha de estilos de sua página, ou seja, entre as tags <style> e </style> ou entre as tags <b:skin> e </b:skin>, se você usa Blogger.

No exemplo acima, já coloquei algumas cores e o resultado vai ser uma barra de rolagem preta com fundo branco e pontas verdes, bem simples. Você pode vê-la na página: meuted.io/scrollbar-colorida.html

Abaixo, seguem exemplos mais incrementados.

🌈 Barra de rolagem com imagem

Este é o código para uma barra de rolagem mais larga e com imagem:

::-webkit-scrollbar {background:#ffffff; width:30px; height:30px;} ::-webkit-scrollbar-thumb {background:orange url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobPRuV9e85aLQ6MLMsHX4yBWiWFYeglaC2fv9dvyo9L1Topb62hJ5rq_PuUtTUjCZUzuAAULRMweYecqvDFdD5xjJAjiZc8trsXn7JRPVfkDA-PtvIgniKllPsmZ9LtZyjCQnZjTJEhvl/s1600/triangulos.png) repeat;} ::-webkit-scrollbar-track {background:#ffffff;} ::-webkit-scrollbar-corner {background:orange url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobPRuV9e85aLQ6MLMsHX4yBWiWFYeglaC2fv9dvyo9L1Topb62hJ5rq_PuUtTUjCZUzuAAULRMweYecqvDFdD5xjJAjiZc8trsXn7JRPVfkDA-PtvIgniKllPsmZ9LtZyjCQnZjTJEhvl/s1600/triangulos.png) repeat;}

Quando uso width estou falando da largura da barra de rolagem vertical. Quando uso height, me refiro à altura da barra de rolagem horizontal. Acredito que fica mais elegante quando as duas têm a mesma largura, mas você pode colocá-las em tamanhos diferentes.

Para usar em seu site, troque a URL da imagem por uma de sua preferência.

Veja o código em funcionamento na página de exemplo: meuted.io/scrollbar-com-imagem.html

🌈 Barra de rolagem com sombra

Criei também um exemplo com sombra. Segue o código:

::-webkit-scrollbar {background:#ffffff;width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:pink; box-shadow:0px 0px 10px deeppink inset;} ::-webkit-scrollbar-corner {background:pink; box-shadow:0px 0px 10px deeppink inset;} ::-webkit-scrollbar-track {background:#ffffff;}

Veja esta barra na página meuted.io/scrollbar-com-sombra.html.

Para saber como personalizar as sombras, visite o post CSS: sombras em caixas em imagens.

🌈 Barra de rolagem com borda

Segue uma página com exemplo de barra de rolagem com borda: meuted.io/scrollbar-com-borda.html:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:lightyellow; border:2px dashed orange;} ::-webkit-scrollbar-corner {background:#ffffff;} ::-webkit-scrollbar-track {background:#ffffff;}

Para aprender os vários tipos de bordas, visite o post Aprendendo a usar bordas.

🌈 Barra de rolagem que muda de cor

Neste exemplo a barra de rolagem muda de cor duas vezes: quando você passa o mouse sobre ela e quando clica na barra:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:purple;} ::-webkit-scrollbar-thumb:hover {background:#ffffff; border:2px solid purple;} ::-webkit-scrollbar-thumb:active {background:deeppink; border:0;} ::-webkit-scrollbar-corner {background:#ffffff;}

Veja em funcionamento na página meuted.io/scrollbar-que-muda-de-cor.html.

🌈 Barra de rolagem listrada (sem imagem) que muda de cor

Esse código é um pouco mais complexo:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:repeating-linear-gradient(45deg, transparent, transparent 10px, #990099 10px, #990099 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-thumb:hover {background:repeating-linear-gradient(45deg, transparent, transparent 10px,#99cc00 10px,#99cc00 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-thumb:active {background:repeating-linear-gradient(45deg, transparent, transparent 10px,#0099cc 10px,#0099cc 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-corner {background:#ffffff;}

Veja esse bonito recurso funcionando na página meuted.io/scrollbar-listrada.html.

🌈 Todos os exemplos:

• Barra de rolagem colorida
• Barra de rolagem com imagem
• Barra de rolagem com sombra
• Barra de rolagem com borda
• Barra de rolagem que muda de cor
• Barra de rolagem listrada (sem imagem) que muda de cor

🌈 Mais algumas dicas:

Você pode agrupar vários atributos em uma mesma barra de rolagem, só terá mais trabalho para deixá-la agradável e combinando com o resto do site.

Neste post priorizei cor e tamanho. Para aprender a customizar ainda mais a barra de rolagem, visite o site CSS Tricks.

Caso procure boas imagens pattern, sugiro o site ColourLovers.com. A versão menor da imagem (para usar lado a lado em backgrounds) fica no link Preview.

Para escolher cores, visite os posts:

• Tabela de cores
• Tabela Candy Colors em RGB
• Como usar as cores em RGB
• Cubo de cores seguras

Até mais!