Gerador de barra de rolagem CSS

Gere barras de rolagem CSS personalizadas visualmente. Personalize a largura, a cor da pista, a cor do indicador, as bordas e o raio do canto com visualização em tempo real. Compatível com Chrome, Safari, Edge e Firefox.

Personalização

{{ scrollbarWidth }}px
{{ scrollbarHeight }}px
{{ thumbMinHeight }}px
{{ thumbRadius }}px
{{ trackRadius }}px
{{ shadowBlur }}px
{{ shadowOpacity }}%

Visualização em tempo real

Área de visualização rolável

Esta é uma área de visualização rolável. Arraste as barras para testar.

Ajuste os valores à esquerda para atualizar instantaneamente.

Compatível com Chrome/Safari/Edge (com bordas, sombras e hover) e Firefox.

Copie o código CSS gerado quando terminar.

{{ t('color_item') }} {{ i }}

Esta é uma área de visualização rolável. Arraste as barras para testar.

Ajuste os valores à esquerda para atualizar instantaneamente.

Compatível com Chrome/Safari/Edge (com bordas, sombras e hover) e Firefox.

Copie o código CSS gerado quando terminar.

Nota: Bordas, raio, sombras e estados hover funcionam no Chrome/Safari/Edge. O Firefox suporta apenas largura e cores básicas.

{{ t('css_code_output') }}