Input Field Gerador
Estiliza campos de formulário com bordas, anéis de foco e espaçamento à medida. Grátis, online e sem registo. Copia o código CSS no teu browser.
Predefinições
Inspirado em
Básico
Etiqueta e conteúdo
Tipo de campo
Ícones e afixos
Cores de estado
Animação
Designs guardados
Ainda não há designs guardados.
Acessibilidade
- ✅Contraste de cor ≥ 4.5:1 (17.85:1)
- ✅Indicador de foco visível
- ✅Etiqueta presente e ligada
- ✅Placeholder não usado como etiqueta
- ✅Mensagem de erro fornecida
- ✅Campo obrigatório indicado
1.custom-input {2 width: 100%;3 padding: 10px 14px 10px 14px;4 border: 1px solid #d1d5db;5 border-radius: 8px;6 background: #ffffff;7 color: #0f172a;8 font-size: 15px;9 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;10 outline: none;11 transition: all 150ms ease;12}13.custom-input::placeholder { color: #9ca3af; }14.custom-input:focus {15 border-color: #6366f1;16 box-shadow: 0 0 0 3px rgba(99,102,241,0.20);17}18.custom-input:disabled { opacity: 0.5; cursor: not-allowed; }19.custom-input.error {20 border-color: #ef4444;21 animation: shake 0.4s ease;22}23.custom-input.success { border-color: #22c55e; }24@keyframes shake {25 0%,100% { transform: translateX(0); }26 25% { transform: translateX(-4px); }27 75% { transform: translateX(4px); }28}Sobre esta ferramenta
Gerador de Campos de Formulário é uma ferramenta criativa para designers que funciona diretamente no browser. Gera uma pré-visualização instantânea, personaliza à vontade e exporta para o teu projeto.
A ferramenta foi concebida para uso diário. Lida com tudo, de tarefas pontuais a fluxos de trabalho recorrentes; carrega em milissegundos, funciona offline após o primeiro carregamento e corre com fluidez no computador, tablet e telemóvel. A interface é propositadamente simples para te concentrares no resultado, não nos controlos.
Casos de uso comuns: testar estilos antes de os aplicar em ficheiros CSS reais, fazer protótipos visuais rápidos para designers ou clientes, exportar design tokens reutilizáveis para um design system, comunicar conceitos de design visualmente. Sejas estudante, profissional ou alguém que só precisa de uma ferramenta rápida, Gerador de Campos de Formulário resolve a tarefa em segundos.
A privacidade está integrada desde o início. Como todo o processamento ocorre no browser (do lado do cliente), nenhum serviço de análise, rede de publicidade ou backend consegue ver o que introduzes ou geras. Abre o separador de rede do teu browser enquanto usas a ferramenta e verás por ti que nenhum pedido externo com os teus dados é enviado. Por isso Gerador de Campos de Formulário é também ideal para conteúdo sensível (médico, jurídico, financeiro) que não pode ser enviado a terceiros.
Gerador de Campos de Formulário faz parte do ToolHub — uma coleção gratuita e sem publicidade com mais de 750 ferramentas baseadas no browser para PDF, imagens, texto, calculadoras, programadores, design, redes sociais, educação, negócios, saúde e muito mais.
Como usar
- 1Ajusta as definições com os controlos disponíveis
- 2Visualiza o resultado na pré-visualização ao vivo
- 3Afina até ficares satisfeito
- 4Copia o código ou descarrega o resultado
Características principais
- Processamento 100% do lado do cliente: os teus dados nunca saem do browser
- Totalmente gratuito: sem registo, sem e-mail e sem pagamentos
- Funciona no computador, tablet e telemóvel (áreas de toque de 44px)
- Modo escuro e 17 idiomas integrados
- Geração instantânea: sem limite de tamanho de ficheiro
Dicas profissionais
- Adiciona a ferramenta aos favoritos para a abrires com um clique da próxima vez: todas as definições ficam guardadas no localStorage.
- Dica: para o melhor resultado, certifica-te de que uses um browser moderno compatível com CSS3 e SVG.
- Encontraste um erro ou queres uma nova funcionalidade? Usa o formulário de comentários no fundo da página; lemos todas as sugestões.