Gerador de Switch CSS

Ajusta os controlos para desenhar um switch (toggle), clica na pré-visualização para veres a animação, e depois copia o HTML e CSS prontos a usar. Define largura, altura, cores da trilha em desligado/ligado, cor do botão, arredondamento dos cantos e velocidade da transição — o resultado é um switch acessível baseado em checkbox padrão, não apenas uma forma decorativa.

O que é esta ferramenta?

Um switch CSS é um checkbox estilizado para parecer e funcionar como um interruptor físico de ligar/desligar — uma trilha em forma de cápsula com um botão circular que desliza de um lado para o outro. Por baixo continua a ser um verdadeiro input checkbox, o que é importante: mantém o controlo acessível pelo teclado, utilizável com leitores de ecrã e compatível com o envio de formulários, ao contrário de um switch construído apenas com divs clicáveis.

Esta ferramenta constrói esse padrão por ti: um checkbox escondido, uma trilha que muda de cor com base em :checked, e um botão que desliza usando uma transformação CSS. Ajusta os controlos e seletores de cor, clica na pré-visualização para testar a animação real, e copia tanto o CSS como o markup HTML mínimo do qual depende.

Fonte: WAI-ARIA Authoring Practices, W3C — recomenda um input checkbox real como base acessível para um controlo de switch, e é por isso que o resultado deste gerador mantém o elemento input subjacente.

Por que usar?

A pré-visualização é um switch real e clicável — não uma imagem estática — por isso podes testar a animação exata antes de a usares.
Gera tanto o CSS como a estrutura HTML acessível (input checkbox + label) de que o CSS depende.
Controlo total sobre largura/altura da trilha, cor em desligado, cor em ligado, cor do botão, arredondamento dos cantos e velocidade da transição.
Usa o padrão standard checkbox + seletor :checked, por isso o switch continua navegável pelo teclado e funciona dentro de formulários reais.
Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum.
Grátis, sem registo, funciona em celular.

Como usar

Define largura e altura para dimensionar a trilha — o botão é automaticamente dimensionado para encaixar com uma pequena margem interna.
Escolhe a cor do estado desligado (não marcado) da trilha, e a cor do estado ligado quando ativado.
Escolhe uma cor para o botão — branco ou um neutro claro costuma dar o maior contraste com a trilha.
Define o raio da borda para 50% para um switch clássico em forma de cápsula, ou reduz para um retângulo ligeiramente arredondado.
Ajusta a velocidade da transição para controlar a rapidez com que o botão desliza e a cor da trilha muda entre estados.
Clica no switch da pré-visualização para confirmar que a animação está correta, depois copia o CSS e o HTML para o teu projeto.

Exemplo

Entrada

Largura: 52px · Altura: 28px · Cor desligada: #cbd5e1 · Cor ligada: #ea580c · Raio: 50% · Velocidade: 200ms

Resultado

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

O núcleo do padrão: o estado :checked do checkbox, combinado com o seletor de irmão geral (~), controla tanto a cor de fundo da trilha como a distância de deslizamento do botão.

Por que usar um checkbox em vez de uma div com um evento de clique

É tentador construir um switch com dois elementos <div> e algum JavaScript que troca uma classe ao clicar, mas essa abordagem costuma quebrar a navegação pelo teclado, os anúncios de leitores de ecrã e o envio de formulários — um checkbox real resolve os três de graça. O padrão que esta ferramenta gera mantém o <input type="checkbox"> como o verdadeiro elemento interativo (escondido visualmente mas ainda focável), e usa CSS puro — sem qualquer JavaScript — para estilizar a trilha e o botão com base no estado nativo :checked do checkbox.

Estilos de switch comuns

Switch clássico em cápsula: raio da borda a 50%, tamanho moderado (48–56px de largura), uma mudança de cor clara entre ligado/desligado.
Switch de painel de definições: tamanho mais pequeno (36–44px de largura), cor desligada discreta (cinza claro) contra um estado ligado com a cor da marca.
Switch ligeiramente arredondado: raio da borda entre 20–30% em vez de uma cápsula completa, para um visual mais retangular, estilo aplicação.
Switch rápido e ágil: velocidade de transição de 100–150ms dá uma sensação imediata e responsiva.
Switch lento e deliberado: velocidade de transição de 300–400ms parece mais suave e polido, útil para um único switch de definições em destaque.

Combinar com outras ferramentas CSS

A trilha e o botão gerados já usam border-radius internamente, por isso se quiseres uma variante quadrada ou com arredondamento diferente do que o controlo deslizante oferece, o Gerador de Border Radius permite ajustar cada canto de forma independente antes de colares o valor. O Gerador de Box Shadow é útil para adicionar uma sombra subtil ao botão para mais profundidade.

→ Gerador de Border Radius · Gerador de Box Shadow

Perguntas frequentes

Por que o resultado inclui HTML, não só CSS?

Um switch não é puramente visual — depende de um verdadeiro <input type="checkbox"> envolvido num <label>, mais os elementos de trilha e botão que o CSS visa. Sem essa estrutura exata, os seletores baseados em :checked no CSS gerado não teriam nada a que se ligar, por isso as duas partes são copiadas juntas.

Este switch é acessível?

Sim — como o elemento interativo é um checkbox real (apenas escondido visualmente com uma técnica que o mantém na árvore de acessibilidade, não com display:none), continua focável com Tab, ativável com Espaço ou Enter, e corretamente anunciado por leitores de ecrã como um checkbox no seu estado atual marcado/desmarcado.

Posso usar isto dentro de um formulário HTML real?

Sim. Como o elemento subjacente é um input checkbox standard, podes dar-lhe um atributo name e value e ele será enviado como qualquer outro checkbox — switches marcados enviam o seu valor, os não marcados são omitidos, exatamente como um checkbox normal.

Por que o botão se move usando transform em vez de mudar a posição left?

Animar transform: translateX() é tratado pelo compositor do navegador e mantém-se suave mesmo em dispositivos mais fracos, enquanto animar left desencadeia um recálculo de layout em cada frame. O CSS gerado usa sempre transform para o movimento de deslizar por este motivo.

O que controla exatamente o controlo deslizante de raio da borda?

Ele escala tanto o arredondamento dos cantos da trilha como o do botão em conjunto, proporcionalmente à altura da trilha. A 50% obténs uma cápsula totalmente arredondada com um botão circular; valores mais baixos mantêm a forma mais retangular para um switch mais quadrado, estilo aplicação.