Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Caminho da tarefa / da entrada ao resultado

Dimensione a trilha

Roda localmente · Nada é enviado

Como Gerador de interruptores CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como criar um interruptor em CSS puro

  1. 01

    Dimensione a trilha

    Defina a Largura da trilha entre 44 e 128 px e a Altura da trilha entre 24 e 64 px. A largura deve superar a altura em pelo menos 8 px para que o botão tenha espaço para deslizar. O padrão de 64 por 34 px espelha as proporções da maioria dos interruptores mobile.

  2. 02

    Encaixe o botão

    Escolha um Tamanho do botão de 16 a 56 px. Ele deve caber dentro da trilha — no máximo a altura da trilha menos 4 px — ou o status muda para VERIFIQUE OS VALORES com a regra exata que falhou.

  3. 03

    Colora os dois estados

    Escolha Trilha inativa para a posição desligada e Trilha ativa para a posição ligada. O botão em si permanece branco com uma pequena sombra suave, então as duas cores da trilha só precisam contrastar com o branco.

  4. 04

    Pré-visualize a transição

    Ative Mostrar estado ativo para ver o botão deslizar e a trilha mudar de cor no tempo real de ease de 180 ms. O preenchimento ao redor do botão é calculado como metade da altura restante da trilha, então o encaixe fica uniforme em qualquer tamanho que você escolher.

  5. 05

    Copie ou baixe o CSS

    Pressione Copiar CSS ou Baixar .css para salvar toolars-switch.css. O botão branco desliza a distância calculada entre os estados, e a exportação inclui tratamento de foco e reduced-motion desde o início. O painel de saída mostra a contagem de bytes ao vivo, para você ver o quanto o componente permanece compacto.

  6. 06

    Monte o HTML

    Coloque um input de caixa de seleção seguido de um elemento .switch-track dentro de um wrapper .switch, exatamente nessa ordem — o seletor de irmão depende disso. O input encolhe para uma caixa invisível de 1 px, mas continua focável, e o foco desenha um contorno de 3 px na sua cor de Trilha ativa.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de interruptores CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de interruptores CSS realmente faz

Alternadores de modo escuro, interruptores de notificação, flags de recursos em um painel de configurações — o mesmo componente aparece em todo lugar, e ajustar sua geometria no inspetor do navegador é lento. Aqui a trilha, o botão e a distância de deslize são definidos visualmente de uma vez, a exportação mantém um input real para suporte a teclado e tecnologia assistiva, e os experimentos nunca saem da aba. O resultado encaixa em um design system sem uma única linha de JavaScript. Os dois estados podem ser revistos lado a lado antes de qualquer coisa ser copiada.

Perguntas frequentes

Que HTML a exportação espera?
Um wrapper .switch contendo um input de caixa de seleção seguido de um elemento .switch-track. O input fica visualmente oculto, mas permanece focável e operável, então o interruptor final se comporta como o controle nativo que ele envolve.
Quais regras de geometria são aplicadas?
Duas: a largura da trilha deve ser pelo menos 8 px maior que sua altura, e o botão deve caber dentro da trilha — no máximo a altura menos 4 px. Quebrar qualquer uma mostra VERIFIQUE OS VALORES, e copiar e baixar ficam desativados até os valores passarem.
Qual a distância que o botão percorre?
A folha de estilos calcula a partir dos seus números: largura da trilha menos o tamanho do botão menos o preenchimento nas duas pontas, então o botão para rente à borda da trilha tanto na posição desligada quanto na ligada.
A exportação trata reduced motion?
Sim. Um bloco prefers-reduced-motion remove as duas transições de 180 ms — a mudança de cor da trilha e o deslize do botão — então a mudança de estado ainda acontece, mas acontece instantaneamente, sem movimento algum.
Que detalhes visuais vêm embutidos?
A trilha é sempre uma cápsula completa, porque o raio de canto é metade da altura da trilha, e o botão branco carrega uma pequena sombra fixa para dar elevação. Todo o resto — cores, geometria, distância de deslize — vem diretamente dos valores dos seus controles.
Meus designs são enviados?
Não. O espaço de trabalho roda inteiramente na aba atual do navegador sem conta, e nenhum valor é armazenado, registrado ou enviado. Uma vez carregada a página, o gerador também continua funcionando sem conexão de rede. Pressione Redefinir para restaurar os padrões.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar

Gerador de padrões de fundo CSS

CSS Background Pattern Generator

Componha fundos de pontos, grade ou diagonais só com gradientes CSS — sem arquivo de imagem — com controles de ladrilho, marca e cor.

Criar