Gerador de Checkbox CSS
Gere um checkbox CSS personalizado ou switch toggle — escolha um estilo, cores, tamanho, raio do canto e velocidade de animação, e copie o CSS + HTML pronto para usar. CSS puro, acessível via teclado, sem JavaScript.
Entrada
Altura da caixa. O estilo Switch Toggle é automaticamente 1.8× mais largo do que alto.
Usada para o estado marcado e o anel de foco do teclado.
Cor da borda quando desmarcado — cor da pista para o estilo Switch Toggle.
O marca de seleção, cruz ou botão do toggle. Ignorado por Contorno, que desenha sua marca de seleção na cor de destaque.
Aplica-se aos estilos quadrados. Círculo Preenchido e Switch Toggle são sempre totalmente arredondados.
Comprimento da transição de marcação/desmarcação (0.05-1s).
Mostrado ao lado do checkbox no snippet HTML. Deixe em branco para um controle simples.
Namespace de cada classe gerada para que o CSS não possa colidir com sua folha de estilos.
Saída
Seu checkbox aparecerá aqui.
O checkbox gerado de verdade, isolado em um Shadow DOM — clique para ver a animação.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-checkbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "filled",
"size": "24",
"accentColor": "#2563eb",
"borderColor": "#9ca3af",
"checkColor": "#ffffff",
"radius": "6",
"duration": "0.2",
"labelText": "I agree to the terms",
"classPrefix": "io"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-checkbox-generator` tool (CSS Checkbox Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-checkbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Checkbox CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
O Gerador de Checkbox CSS cria um checkbox personalizado — ou um switch toggle — como um snippet CSS + HTML autossuficiente. Escolha um estilo, defina as cores, o tamanho, o raio do canto e a velocidade da animação, e copie os dois blocos de código diretamente para seu projeto. Tudo é CSS puro: sem JavaScript, sem fonte de ícone, sem sprite SVG, sem dependência alguma.
Ele estiliza o checkbox real, não um falso
A maioria dos snippets de checkbox personalizado ocultam o <input> nativo fora da tela e desenham um <span> ao lado dele. Isso funciona visualmente, mas descarta tudo que o navegador oferece gratuitamente. Este gerador, em vez disso, define appearance: none no <input type="checkbox"> real e pinta a caixa, a marca de seleção e o botão do toggle com pseudo-elementos ::before / ::after.
A diferença prática: o controle ainda recebe foco com a tecla Tab, ainda alterna com Espaço, ainda envia seu valor com o formulário ao seu redor e ainda é anunciado como um checkbox por leitores de tela — sem uma única linha de markup ou ARIA extra.
Cada folha de estilos gerada também envia três coisas que checkboxes copiados geralmente omitem:
- um anel
:focus-visiblena sua cor de destaque, para que usuários de teclado possam ver onde estão; - um estado
:disabled(atenuado, cursornot-allowed); - um bloco
@media (prefers-reduced-motion: reduce)que desativa a transição e a animação bounce para qualquer pessoa que tenha solicitado ao seu sistema reduzir movimento.
Os seis estilos
- Quadrado Preenchido — o clássico: uma caixa com borda que se preenche com a cor de destaque e revela uma marca de seleção desenhada de uma borda rotacionada.
- Contorno — a caixa permanece transparente; apenas a borda e a marca de seleção assumem a cor de destaque. Bom em fundos escuros ou ocupados.
- Círculo Preenchido — o mesmo comportamento de preenchimento e marca de seleção em uma caixa totalmente redonda.
- Switch Toggle — uma pista em forma de pílula com um botão que desliza ao marcar. O markup ainda é um checkbox, então funciona em formulários sem alterações.
- Jelly Bounce — uma caixa preenchida com uma animação
@keyframessqueeze-and-stretch bounce quando marcada. - Marca de Cruz — se preenche com a cor de destaque e marca com um ✗ em vez de um ✓, para semântica de "excluído" ou "removido".
Como usar
- Escolha um Estilo de Checkbox.
- Defina o Tamanho — a altura da caixa em pixels. O Switch Toggle é automaticamente 1.8× mais largo do que alto.
- Escolha as três cores: Destaque (estado marcado e anel de foco), Desmarcado (borda em repouso, ou pista do toggle) e Marca de Seleção (marca de seleção, cruz ou botão).
- Ajuste Raio do Canto para os estilos quadrados e Duração da Animação para a transição de marcação/desmarcação.
- Defina um Texto do Rótulo e, se seu projeto já usar nomes de classe genéricos, um Prefixo de Classe — cada classe gerada recebe namespace com ele, para que as regras não possam colidir com sua folha de estilos existente.
- Copie o CSS para sua folha de estilos e o HTML para sua marcação.
FAQ
Isso ainda funcionará dentro de um <form>?
Sim. O elemento sendo estilizado é o checkbox, então envia seu name e value exatamente como um não estilizado. Adicione name="..." ao <input> no markup gerado.
Como faço para usar vários destes em uma página?
Cole o CSS uma vez e reutilize o markup <label> quantas vezes quiser — as regras são baseadas em classe, não em ID. Para dois looks diferentes em uma página, gere um segundo estilo com um Prefixo de Classe diferente.
Por que a Cor da Marca de Seleção é ignorada pelo estilo Contorno? Contorno mantém deliberadamente a caixa transparente, para que uma marca de seleção branca fosse invisível em uma página clara. Esse estilo sempre desenha sua marca de seleção na cor de destaque.
O Raio do Canto faz algo para o círculo ou para o switch? Não — ambos são sempre totalmente arredondados por design. O raio aplica-se a Quadrado Preenchido, Contorno, Jelly Bounce e Marca de Cruz.
Esta ferramenta envia algo? Não. O snippet é gerado em seu navegador a partir dos valores que você escolhe; nada é enviado para um servidor ou armazenado.
Ferramentas Relacionadas
Precisa de outras CSS de formulário ou componente? O Gerador de Animação de Carregamento CSS cria um spinner CSS puro correspondente, o Gerador de Box Shadow CSS ajuda você a estilizar o card em que o formulário fica, e o Gerador de Animação Keyframe CSS é o lugar certo se você quiser escrever uma animação de marcação personalizada própria. Para reduzir a folha de estilos finalizada antes de enviar, execute através do CSS Minifier & Beautifier.