Gerador de Scrollbar CSS
Personalize o design da barra de rolagem CSS com um editor visual. Ajuste cor, largura, raio da borda e copie o código diretamente.
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Conteúdo de rolagem #1 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #2 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #3 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #4 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #5 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #6 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #7 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #8 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #9 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #10 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #11 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #12 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #13 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #14 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #15 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #16 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #17 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #18 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #19 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #20 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #21 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #22 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #23 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #24 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #25 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #26 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #27 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #28 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #29 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Conteúdo de rolagem #30 - Pré-visualize sua barra de rolagem personalizada. Role para vê-la em ação.
Como usar
Definir Estilo
Defina largura, cores, raio da borda da barra de rolagem, etc.
Pré-visualizar
Verifique a aparência da barra de rolagem na pré-visualização em tempo real
Copiar CSS
Copie o código CSS gerado
Recursos
Pré-visualização em Tempo Real
Pré-visualize a barra de rolagem em tempo real ao alterar as configurações
Suporte Cross-browser
Gera automaticamente CSS para WebKit e Firefox
Estados Hover e Ativo
Personalize estilos de hover e arraste individualmente
FAQ
🔗Ferramentas relacionadas
Conversor de Código de Cor
Converta entre códigos de cor HEX, RGB e HSL. Use o seletor de cores e a visualização em tempo real para seleção intuitiva de cores.
Seletor de Cores
Selecione cores intuitivamente usando uma roda de cores e controles deslizantes. Obtenha e copie códigos de cor nos formatos HEX, RGB e HSL.
Extrator de Cores de Imagem
Detecte automaticamente as cores dominantes de uma imagem e gere uma paleta de cores. Você também pode clicar em qualquer lugar da imagem para selecionar cores individuais.
Seletor de Cor Média da Imagem
Calcule a cor média de uma imagem inteira ou de uma área selecionada. Útil para escolher esquemas de cores ou cores de fundo de miniaturas.
Gerador de Gradiente CSS
Crie visualmente gradientes CSS com controles de arraste. Suporta tipos de gradiente linear, radial e cônico com predefinições.
Gerador de CSS Box Shadow
Crie visualmente CSS box-shadow com controles deslizantes. Suporta múltiplas sombras e sombras internas.