PT
PortuguêsEnglishEspañol
Início Favoritos
Ferramentas para programador 100% grátis

Programador

JSON, Base64, regex, hash, cores, CSS e outras ferramentas para programar.

Blocos prontos para site 58CSS e design 50SEO e publicação 27Formatar e converter 31Códigos, hash e redes 25Dados para teste 9

Blocos prontos para site 58

Agendamento pelo WhatsApp para site (serviço, dia e horário)Coloque no site do seu salão, barbearia, clínica de estética, estúdio ou oficina um agendamento em que o cliente escolhe o serviço, o dia e o horário e envia o pedido pronto para o seu WhatsApp. Você define os serviços, os dias de atendimento e os horários. Sem servidor, sem mensalidade e sem cadastro.Usar →
Área de entrega para site (consulta de bairro e taxa)Coloque no site do seu delivery, pizzaria, mercado ou loja um campo onde o cliente digita o bairro e vê na hora se você entrega lá, a taxa e o prazo. Você escreve a lista de bairros atendidos e recebe o HTML, o CSS e o JavaScript prontos, sem servidor e sem mensalidade, com botão de pedir pelo WhatsApp.Usar →
Barra de aviso para site (faixa no topo)Crie a faixa de aviso que fica no topo do site para avisar de promoção, frete grátis, horário de feriado ou novidade: texto, link, cores, botão de fechar que lembra a escolha e opção de mostrar só até uma data.Usar →
Barra de etapas para site (stepper em HTML e CSS)Gere uma barra de etapas (stepper) para checkout, cadastro em várias partes, acompanhamento de pedido ou como funciona: etapas numeradas, etapa atual em destaque, concluídas com check, na horizontal ou na vertical. HTML semântico com aria-current, CSS puro e cores da marca.Usar →
Barra de frete grátis para loja virtualGere a barra de progresso "faltam R$ 30 para o frete grátis" para o carrinho da sua loja virtual: valor mínimo, mensagem antes e depois de atingir, cores e uma função para atualizar com o total do carrinho. HTML, CSS e JavaScript puro, em reais.Usar →
Barra de progresso de leituraGere a barra fina no topo da página que mostra quanto do artigo já foi lido: feita com animação ligada à rolagem do CSS (scroll-driven animations) e um script de reserva para navegadores sem suporte. Cor, altura e posição a escolher.Usar →
Botão de ligar para site (link tel: e botão flutuante)Gere o link de telefone (tel:) no formato certo para o Brasil e o botão "Ligar agora" do seu site: botão comum ou flutuante no canto, com ícone, cor e texto, que no celular abre a discagem direto. Aceita fixo, celular e 0800.Usar →
Botão de modo escuro para siteGere o botão de alternar tema claro e escuro do seu site: segue o tema do sistema por padrão, lembra a escolha da pessoa, não pisca o tema errado ao carregar e usa variáveis CSS e color-scheme para trocar as cores de tudo de uma vez.Usar →
Botão voltar ao topoGere o botão flutuante de voltar ao topo da página para o seu site: aparece depois de rolar, posição, cores, tamanho e formato a escolher, rolagem suave que respeita o movimento reduzido e foco devolvido ao começo da página.Usar →
Botão flutuante do WhatsApp para siteGere o código do botão flutuante do WhatsApp para colocar no seu site: número, mensagem pronta, posição, cor, tamanho e balão de texto. Copie o HTML e cole antes do </body>, sem plugin.Usar →
Botões de compartilhar para siteGere botões de compartilhar para o seu site ou blog: WhatsApp, Facebook, X, LinkedIn, Telegram, Pinterest, e-mail e copiar link, com o menu de compartilhar nativo do celular. Links oficiais, sem scripts de terceiros e sem rastreamento.Usar →
Caixas de alerta e avisos em CSS (info, sucesso, atenção, erro)Gere caixas de aviso para o seu site ou blog: informação, sucesso, atenção, erro e dica, com ícone, título, texto e botão de fechar opcional. Escolha o estilo e as cores, veja a prévia e copie o HTML e o CSS, acessíveis e sem biblioteca.Usar →
Cartão de visita digital (página com botão de salvar contato)Crie o seu cartão de visita digital: uma página leve com foto, nome, cargo, empresa e botões de WhatsApp, ligar, e-mail, Instagram, site e endereço, mais o botão Salvar contato, que baixa o vCard para a agenda do celular. Baixe o HTML para publicar e gere o QR Code para imprimir.Usar →
Citação em destaque em HTML e CSS (blockquote)Gere a citação em destaque para o seu site ou blog: frase de cliente, trecho de entrevista ou chamada no meio do texto, com aspas grandes, autor e cargo, em cinco estilos e nas cores da marca. HTML semântico com blockquote e figcaption, CSS leve, pronto para colar.Usar →
Contador regressivo para siteGere o código de uma contagem regressiva para colar no seu site, landing page ou loja: dias, horas, minutos e segundos até a data da promoção, do lançamento ou do evento, com fuso horário certo, cores e mensagem ao terminar.Usar →
Caixa de cupom de desconto para site (copiar com um clique)Gere a caixa de cupom do seu site ou loja virtual: código em destaque, botão que copia com um clique e confirma "Copiado!", texto do desconto, validade que esconde o cupom sozinha depois da data e estilo de ticket recortado. HTML, CSS e JavaScript puro.Usar →
Seção de depoimentos para site (HTML e CSS)Monte a seção de depoimentos de clientes do seu site: nome, cidade ou cargo, foto ou iniciais, estrelas e o texto, em grade ou em carrossel com rolagem, nas cores da sua marca. Código HTML e CSS puro, sem bibliotecas.Usar →
Estrelas de avaliação em CSS (nota com frações)Gere estrelas de avaliação para o site que mostram notas quebradas, como 4,3 ou 3,7, preenchendo a fração exata da estrela, em CSS puro com uma variável. Tamanho, cores, quantidade de estrelas, número ao lado e versão clicável para o cliente votar.Usar →
Faixa de chamada para ação (CTA) para siteGere a faixa de chamada para ação que fecha as páginas do site: título, texto curto, botão principal e secundário (como WhatsApp e telefone), com fundo em cor, degradê ou foto escurecida, centralizada ou com o botão ao lado. HTML e CSS responsivos.Usar →
Faixa de logos infinita (marquee CSS)Gere a faixa que passa sem parar com logos de clientes, parceiros, marcas que você trabalha ou frases curtas, em CSS puro: velocidade, direção, espaço, pausa ao passar o mouse, bordas que somem e parada para quem pediu menos movimento.Usar →
Formulário de contato para site (sem servidor)Gere o formulário de contato do seu site estático que chega no seu e-mail sem programar servidor: FormSubmit, Formspree ou Netlify Forms, com os campos que você escolher, anti-spam, página de obrigado, validação e estilo acessível.Usar →
Formulário que envia para o WhatsAppGere um formulário de contato ou de pedido para o site que manda as respostas direto para o seu WhatsApp, sem servidor e sem programação: escolha os campos, o número e o texto do botão e copie o código.Usar →
Galeria de fotos para site (com ampliação)Monte o código de uma galeria de fotos responsiva para o seu site, com ampliação ao tocar (lightbox) usando o elemento dialog do HTML: setas, teclado, legenda e carregamento preguiçoso, sem biblioteca. Cole os endereços das fotos e copie.Usar →
Galeria masonry em CSS (estilo Pinterest)Gere a galeria em blocos de alturas diferentes, como no Pinterest, em CSS puro: colunas que se encaixam sem buracos, com número de colunas por tela, espaçamento, cantos e legenda. Usa CSS columns em todos os navegadores e o novo display: grid-lanes onde ele já existe.Usar →
Gerador de abas (tabs) acessíveisGere o código de um componente de abas para o seu site seguindo o padrão de acessibilidade WAI-ARIA: role tablist, tab e tabpanel, setas do teclado, Home e End, cores e estilo sublinhado ou em pílula. HTML, CSS e JavaScript sem biblioteca.Usar →
Gerador de breadcrumb (trilha de navegação) com schemaGere a trilha de navegação (breadcrumb) para as páginas do seu site: HTML acessível com nav e aria-current, separador e cores a escolher, e o JSON-LD BreadcrumbList que o Google usa para mostrar o caminho no resultado da busca.Usar →
Gerador de cards em CSS (seção de serviços)Gere uma seção de cards para o seu site, como serviços, vantagens ou produtos: título, texto e ícone ou imagem em cada card, grade responsiva que se ajusta sozinha, sombra, cantos e efeito ao passar o mouse. HTML e CSS prontos.Usar →
Gerador de carrossel (slider) com CSS scroll-snapGere um carrossel de fotos ou cards para o seu site com CSS scroll-snap: arrasta com o dedo no celular, setas no computador, quantos itens aparecem por vez e espaçamento, sem biblioteca e sem travar a rolagem.Usar →
Gerador de FAQ para site (acordeão + schema)Monte a seção de perguntas frequentes do seu site: acordeão em HTML puro com details e summary, estilo pronto e o JSON-LD FAQPage para o Google, tudo num código só para copiar.Usar →
Gerador de linha do tempo / passo a passo (CSS)Gere uma linha do tempo ou uma seção de passo a passo ("como funciona") para o seu site: etapas numeradas ou com datas, vertical ou horizontal, cores e marcadores, em HTML semântico com lista ordenada e CSS responsivo.Usar →
Gerador de modal (janela pop-up) com dialogGere o código de uma janela modal para o seu site usando o elemento dialog nativo do HTML: título, texto, botões, fechar com Esc ou clicando fora, foco preso dentro da janela e animação de entrada suave. Sem biblioteca.Usar →
Gerador de página 404Crie uma página de erro 404 (página não encontrada) para o seu site nas cores da marca: mensagem amigável, botão para a página inicial, campo de busca opcional e links úteis. Baixe o 404.html pronto, leve e sem dependências.Usar →
Gerador de paginação em HTML e CSSCrie a paginação do seu blog, loja ou lista de resultados: anterior e próxima, números com reticências, página atual em destaque, em três estilos e nas cores da marca. HTML com nav, aria-label e aria-current, links de verdade que o Google segue e área de toque de 44 px.Usar →
Gerador de rodapé para siteMonte o rodapé do seu site em HTML e CSS: nome e descrição, colunas de links, contato com WhatsApp, telefone, e-mail e endereço, redes sociais, CNPJ e o ano do copyright que se atualiza sozinho. Responsivo e pronto para colar.Usar →
Gerador de seção hero (topo da página)Monte a seção de abertura (hero) da sua página inicial ou landing page: título, subtítulo, botão principal e secundário, imagem de fundo ou ao lado, com overlay para o texto ficar legível. HTML e CSS responsivos, com a imagem otimizada para o carregamento.Usar →
Gerador de skeleton loading (CSS)Gere o esqueleto de carregamento (skeleton screen) que aparece enquanto o conteúdo carrega: modelos de card, lista, perfil e texto, cores, cantos e brilho animado, em CSS puro com aria-busy e respeito ao movimento reduzido.Usar →
Gerador de sumário (índice) para post de blogCole o HTML do seu post e receba o sumário com links para cada seção: a ferramenta lê os títulos h2 e h3, cria os ids que faltam a partir do texto e devolve o sumário pronto e o post com os ids colocados. Numeração opcional, bloco que abre e fecha e rolagem suave.Usar →
Horário de funcionamento para siteGere a tabela de horário de funcionamento do seu negócio para o site, com o aviso "aberto agora" ou "fechado" calculado no fuso de Brasília, destaque do dia de hoje e os dados estruturados OpeningHoursSpecification para o Google.Usar →
Iframe responsivo (YouTube, Google Maps e outros)Cole o código de incorporação (iframe) do YouTube, Google Maps, Vimeo, Instagram, Spotify, Canva ou qualquer site, ou só o endereço, e receba o iframe que se ajusta ao celular, com aspect-ratio, carregamento lazy, title para acessibilidade e tela cheia.Usar →
Informações obrigatórias da loja virtual (rodapé com CNPJ)Gere o bloco de rodapé com as informações que o Decreto 7.962/2013 manda a loja virtual mostrar em destaque: nome empresarial, CNPJ ou CPF, endereço físico e eletrônico e contatos, mais os links das políticas e as formas de pagamento. HTML e CSS prontos para colar no site.Usar →
Lista de vantagens com ícones (check) em HTML e CSSTransforme uma lista comum numa lista de vantagens com ícone de check, seta, estrela ou coração, em uma ou duas colunas e nas cores da marca. O ícone vai pelo CSS, sem imagem e sem biblioteca, e a lista continua sendo uma ul de verdade para o Google e para leitores de tela.Usar →
Mapa do Google para siteGere o código para colocar o mapa do Google Maps no seu site a partir do endereço, sem chave de API: escolha o zoom, o tipo de mapa e o tamanho, veja a prévia e copie o iframe responsivo e o link de como chegar.Usar →
Gerador de menu responsivoGere o código de um menu de navegação responsivo para o seu site: links lado a lado no computador e botão hambúrguer no celular, acessível (aria-expanded, tecla Esc, foco) e sem biblioteca. Copie o HTML, o CSS e o JavaScript.Usar →
Números animados para site (contador)Gere a seção de números que contam de zero até o valor quando aparecem na tela, como "+500 clientes atendidos" e "15 anos de experiência": prefixo, sufixo, formato brasileiro, duração e cores, com IntersectionObserver e respeito ao movimento reduzido.Usar →
Página de links para a bioCrie a sua página de links para a bio do Instagram e do TikTok, como um Linktree próprio: foto, nome, descrição, botões de WhatsApp, site, cardápio e redes, com cores e tema. Baixe um único arquivo HTML para hospedar onde quiser.Usar →
Gerador de página de obrigado (depois do formulário ou da compra)Crie a página de obrigado que aparece depois que o cliente envia o formulário, pede orçamento ou compra: confirmação clara, prazo de resposta, próximos passos e convite para o Instagram ou o WhatsApp. HTML leve com noindex, nas cores da marca, pronto para publicar.Usar →
Gerador de página em construção e em manutençãoCrie a página de site em construção (em breve) ou em manutenção nas cores da sua marca: título, mensagem, contagem regressiva opcional, botões de WhatsApp, Instagram e e-mail. Baixe um index.html leve, sem dependências, com as configurações certas para o Google em cada caso.Usar →
Popup para site (aviso, cupom ou newsletter)Gere um popup para o seu site que não irrita nem prejudica o SEO: aparece depois de alguns segundos, ao rolar a página ou quando o mouse vai sair, respeita um intervalo de dias para não repetir, vira uma faixa na parte de baixo do celular e fecha com Esc ou clicando fora. HTML, CSS e JavaScript puro com dialog.Usar →
Seção "como funciona" em etapas (HTML e CSS)Monte a seção de passos do seu site (como funciona, como contratar, como pedir): etapas numeradas com título e texto, na horizontal com linha ligando os números ou na vertical, nas cores da sua marca, com lista ordenada acessível e responsiva.Usar →
Seção da equipe para site (HTML e CSS)Monte a seção "nossa equipe" do site: foto (ou iniciais), nome, função, uma frase e links para Instagram, LinkedIn ou WhatsApp de cada pessoa, em cartões ou em círculos, responsivo e nas cores da sua marca.Usar →
Selo de avaliações do Google para o siteCrie o selo com a nota e o número de avaliações da sua empresa no Google para colocar no site: estrelas, nota, total de avaliações e link para a página de avaliações e para avaliar. HTML e CSS leves, sem script de terceiros e sem mensalidade.Usar →
Selos para loja virtual (garantia, frete, troca)Crie a faixa de selos de vantagens da sua loja virtual ou do seu site: frete grátis, troca grátis, garantia, parcelamento, pagamento por Pix, entrega rápida, feito à mão e o que mais quiser. Ícones em SVG, cores da marca, HTML e CSS leves para colar no site ou baixar os selos em PNG.Usar →
Slider antes e depois para siteGere o comparador de antes e depois para colocar no site: duas fotos sobrepostas com uma divisória que se arrasta com o dedo ou o mouse, rótulos, posição inicial e cores. Feito com um input range, então funciona no teclado e no leitor de tela.Usar →
Tabela comparativa para siteMonte uma tabela de comparação para o seu site (planos, produtos, serviços ou concorrentes): colunas, linhas com sim/não ou texto, coluna em destaque, cabeçalho fixo e rolagem lateral no celular, em HTML de tabela acessível.Usar →
Tabela de medidas para loja de roupas (HTML para o site)Monte a tabela de medidas (guia de tamanhos) da sua loja de roupas para a página do produto: tamanhos nas colunas ou nas linhas, medidas em centímetros, explicação de como medir e botão que abre a tabela numa janela. HTML acessível, responsivo e sem dependências.Usar →
Tabela de preços para site (planos em HTML e CSS)Monte a seção de planos e preços do seu site: dois a quatro planos com nome, preço, período, lista do que inclui e do que não inclui, botão e o plano em destaque, com chave de mensal e anual. HTML e CSS responsivos, nas cores da sua marca.Usar →
Vídeo de fundo para site (HTML5)Gere o código do vídeo de fundo para o topo do site com a tag video do HTML5: autoplay que funciona no celular (muted e playsinline), loop, imagem de capa, camada escura para o texto e pausa para quem pediu menos movimento.Usar →
Vídeo do YouTube leve para siteGere o código para colocar um vídeo do YouTube no site sem deixar a página lenta: mostra só a capa com o botão de play e carrega o player do YouTube (em modo sem cookies) quando a pessoa clica. Cole o link do vídeo e copie.Usar →

CSS e design 50

Animação ao rolar a página (scroll reveal em CSS)Gere o efeito de elementos que aparecem conforme a página rola (scroll reveal) em CSS puro, com animation-timeline: view(): surgir, subir, deslizar dos lados, crescer ou desfocar, com distância e trecho da rolagem ajustáveis, e sem esconder nada em navegadores que ainda não têm o recurso.Usar →
Calculadora de clamp() para fonte fluidaCalcule o clamp() do CSS para textos e espaçamentos que crescem com a largura da tela: informe o tamanho no celular e no computador e as larguras de tela, e copie o valor em rem com a prévia e o aviso de acessibilidade de zoom.Usar →
Combinação de fontes do Google FontsTeste combinações de fontes do Google Fonts para títulos e textos do site: escolha entre pares prontos ou monte o seu, veja a prévia com o seu texto e copie o link de carregamento e o CSS.Usar →
Verificador de contraste de cores (WCAG)Confira se a cor do texto tem contraste suficiente com o fundo pelas regras de acessibilidade WCAG AA e AAA, com prévia ao vivo.Usar →
Conversor de coresConverta cores entre HEX, RGB, HSL e CMYK e veja tons mais claros e mais escuros.Usar →
Cor HEX para classe do TailwindDescubra qual cor da paleta padrão do Tailwind CSS (v3) é mais parecida com a sua cor HEX ou RGB, com a distância perceptual e as cinco opções mais próximas, ou use o valor exato com a sintaxe de colchetes.Usar →
CSS reset moderno (gerador)Monte o CSS reset do seu projeto marcando o que quer: box-sizing border-box, margens zeradas, imagens responsivas, fontes herdadas nos formulários, quebra de palavras longas, rolagem suave segura e movimento reduzido. Cada regra vem explicada.Usar →
Efeito máquina de escrever para site (texto digitando)Gere o efeito de texto sendo digitado para o título do seu site, com várias frases que se escrevem e se apagam em sequência ("Fazemos sites para padarias, salões, oficinas..."), cursor piscando, velocidades, pausa e repetição. HTML, CSS e JavaScript puro e acessível.Usar →
Escala tipográfica e fonte fluida (clamp)Gere a escala de tamanhos de fonte do site a partir de um tamanho base e uma proporção (terça maior, quarta justa, proporção áurea), com versão fluida em clamp() que cresce do celular ao computador. Veja a prévia e copie as variáveis CSS.Usar →
Favicon com letrasCrie um favicon com as iniciais da sua marca, sem precisar de logo: escolha as letras, a fonte, as cores e o formato (círculo, quadrado arredondado ou quadrado) e baixe o favicon.ico, os PNGs e o código para o site.Usar →
Fita de canto e selo em CSS (ribbon e badge)Gere a fita diagonal no canto de cartões e fotos ("Novo", "Mais vendido", "Promoção") e selos redondos ou em etiqueta, em CSS puro: texto, cores, canto, tamanho e estilo, com prévia sobre um cartão.Usar →
Gerador de animação de entrada CSSCrie animações de entrada para os elementos do site (aparecer, subir, crescer, deslizar, desfocar) com curva, duração e atraso ajustáveis, efeito cascata e ativação ao rolar a página, com o CSS e o JavaScript prontos.Usar →
Gerador de blob SVG (formas orgânicas)Gere formas orgânicas (blobs) em SVG para fundos, molduras de fotos e enfeites de sites: ajuste a complexidade e a irregularidade, escolha cor sólida ou degradê e baixe o SVG.Usar →
Gerador de borda degradê (CSS)Gere bordas com degradê em CSS para cartões, botões e fotos: cores, ângulo, espessura e cantos arredondados que funcionam (o que border-image não faz), com opção de borda girando animada e fundo transparente.Usar →
Gerador de border-radius CSSCrie cantos arredondados em CSS com prévia ao vivo: ajuste cada canto, ligue os quatro juntos ou crie formas orgânicas (blob) com os 8 valores do border-radius.Usar →
Gerador de botão CSSCrie botões em CSS para o site de forma visual: cor, texto, tamanho, cantos, borda, sombra e efeitos de hover e clique, com estilos prontos (sólido, contorno, degradê, pílula) e o código CSS e HTML para copiar.Usar →
Gerador de clip-path CSSRecorte imagens e elementos em formas com CSS clip-path: triângulo, losango, hexágono, estrela, seta, mensagem, círculo e cantos cortados. Arraste os pontos na prévia para ajustar e copie o código.Usar →
Gerador de CSS GridMonte layouts com CSS Grid de forma visual: número de colunas e linhas, tamanhos (fr, px, auto), espaçamento e colunas responsivas com auto-fit e minmax. Veja a prévia e copie o CSS e o HTML.Usar →
Gerador de cubic-bezier (easing CSS)Desenhe curvas de animação cubic-bezier arrastando os pontos de controle, compare com ease, ease-in-out e outras curvas prontas e copie o CSS da transição.Usar →
Gerador de cursor personalizado (CSS)Crie um cursor do mouse personalizado para o seu site a partir de uma imagem, de um símbolo ou de um círculo colorido: tamanho, ponto de clique (hotspot), cursor para links e o CSS com cursor reserva. A imagem vira um data URI pronto para colar.Usar →
Gerador de faviconCrie favicon.ico e ícones para site, iPhone e Android a partir de uma imagem.Usar →
Gerador de filtros CSS (filter) para imagensAjuste brilho, contraste, saturação, tons de cinza, sépia, matiz, desfoque, inversão e sombra de uma imagem e copie a propriedade CSS filter pronta, com filtros prontos (preto e branco, vintage, frio, quente, desbotado) e opção de aplicar só ao passar o mouse.Usar →
Gerador de flexbox CSSMonte layouts com CSS flexbox clicando nas opções: direção, alinhamento, justificação, quebra de linha e espaço entre itens, com prévia ao vivo e o CSS pronto para copiar. Bom para aprender o que cada propriedade faz.Usar →
Gerador de @font-faceGere o @font-face do CSS para usar fontes próprias no site: escolha os arquivos (WOFF2, WOFF, TTF, OTF), a ferramenta lê o nome, o peso e o estilo de cada um, monta as regras com font-display swap e a tag preload, e mostra a prévia com a fonte de verdade.Usar →
Gerador de glassmorphism (vidro fosco)Crie o efeito de vidro fosco em CSS (glassmorphism): desfoque do fundo, transparência, cor, borda e sombra, com prévia sobre uma foto ou degradê e o código pronto com backdrop-filter.Usar →
Gerador de gradiente CSSCrie gradientes lineares e radiais com várias cores e copie o CSS pronto.Usar →
Gerador de imagem placeholderCrie imagens de exemplo (placeholder) em qualquer tamanho, com cor de fundo, texto e formato PNG, JPG, WEBP ou SVG, para layouts e protótipos.Usar →
Gerador de imagens responsivas (srcset e sizes)Envie uma foto e receba as versões nas larguras certas (em WebP, AVIF ou JPG) num arquivo .zip, junto com o código <img> com srcset e sizes ou <picture>, width e height para não pular o layout e loading/fetchpriority certos para cada caso.Usar →
Gerador de loader CSS (carregando)Escolha um indicador de carregamento em CSS puro (anel, pontos, barras, pulso, barra de progresso), ajuste a cor, o tamanho e a velocidade e copie o HTML e o CSS, sem imagem e sem biblioteca.Usar →
Gerador de mapa de imagem (áreas clicáveis)Desenhe áreas clicáveis sobre uma imagem (retângulo, círculo ou polígono) e ligue cada uma a um link: planta de imóvel, mapa de lojas, foto de produto, cardápio. Gera o HTML clássico com map e area e uma versão responsiva com links em porcentagem que se ajusta ao celular.Usar →
Gerador de media queries CSS (breakpoints)Gere o esqueleto de media queries do seu CSS com os breakpoints do Bootstrap 5, do Tailwind ou os seus: mobile-first (min-width) ou desktop-first (max-width), em px ou em, mais modo escuro, menos movimento, mouse ou toque, orientação e impressão. Veja ao vivo quais valem na sua tela.Usar →
Gerador de mesh gradientCrie fundos em mesh gradient (degradê com várias manchas de cor, estilo aurora) para sites e posts: escolha as cores, misture as posições com um toque e copie o CSS ou baixe a imagem em PNG.Usar →
Gerador de neumorfismo (soft UI) CSSGere o efeito neumórfico (soft UI) em CSS: elementos que parecem saltar ou afundar no fundo com duas sombras, uma clara e uma escura. Escolha a cor, o tamanho, a distância, o desfoque, a intensidade e o formato (plano, côncavo, convexo ou pressionado).Usar →
Gerador de ondas SVGCrie divisores de seção em forma de onda para o site: ajuste a altura, a quantidade de ondas, as camadas e as cores, inverta e baixe o SVG ou copie o código para usar entre as seções da página.Usar →
Gerador de barra de rolagem CSSPersonalize a barra de rolagem do seu site nas cores da marca: largura, cor do trilho e da barra, cantos arredondados e cor ao passar o mouse, com o CSS padrão (scrollbar-color) e o ::-webkit-scrollbar para navegadores antigos.Usar →
Gerador de box-shadow CSSCrie sombras CSS (box-shadow) com prévia ao vivo: deslocamento, desfoque, espalhamento, cor, opacidade, várias camadas e modelos prontos.Usar →
Gerador de sprite CSS (juntar ícones numa imagem)Junte vários ícones e imagens pequenas num único arquivo (sprite sheet) em PNG ou WebP e receba o CSS com background-position e o tamanho de cada um, com espaçamento, em linha, coluna ou grade, e versão para telas retina.Usar →
Gerador de tema claro e escuro (variáveis CSS)A partir da cor da sua marca, gere as variáveis CSS de um tema completo, claro e escuro: fundo, superfície, texto, texto secundário, borda, cor principal e o texto sobre ela, com contraste conferido pela WCAG e modo escuro automático por prefers-color-scheme ou por um botão (data-theme).Usar →
Gerador de text-shadow CSSCrie sombras de texto em CSS com prévia ao vivo e modelos prontos: neon, retrô, 3D, contorno, fogo e relevo, com várias camadas e cores.Usar →
Gerador de texto em degradê (CSS)Crie títulos com texto em degradê para o seu site usando background-clip: text: escolha as cores, o ângulo, a fonte e copie o CSS, com cor de reserva para navegadores antigos e para quem usa alto contraste.Usar →
Gerador de textura granulada (noise) para fundosGere a textura de granulado (noise) que dá aspecto de papel ou filme a fundos e degradês: intensidade, tamanho do grão, cor e opacidade, com prévia sobre a sua cor ou degradê. Baixe em PNG para repetir no fundo ou copie como SVG em CSS.Usar →
Gerador de toggle switch (botão liga/desliga) CSSGere um botão liga/desliga (toggle switch) para o seu site em HTML e CSS puros, acessível com role=switch: tamanho, cores, cantos e texto, com prévia que funciona com mouse, toque e teclado.Usar →
Gerador de tooltip CSSGere a dica que aparece ao passar o mouse ou focar num elemento (tooltip) em CSS puro: posição em cima, embaixo, à esquerda ou à direita, setinha, cores, cantos e atraso, acessível com aria-describedby e visível no foco do teclado.Usar →
Gerador de transform CSS (girar, mover, escalar, inclinar e 3D)Monte a propriedade CSS transform mexendo em controles: mover (translate), girar (rotate), escalar (scale), inclinar (skew) e girar em 3D com perspectiva, com o ponto de origem (transform-origin) e uma transição de hover para testar. Copie o CSS pronto.Usar →
Otimizar SVGDiminua o tamanho de arquivos SVG exportados do Illustrator, Figma, Inkscape ou Canva: remove comentários, metadados, dados do editor e espaços e arredonda as casas decimais, com prévia lado a lado para conferir.Usar →
Padrões de fundo em CSSCrie fundos com padrão em CSS puro, sem imagem: bolinhas, quadriculado, linhas, listras diagonais, xadrez e zigue-zague. Ajuste as cores, o tamanho e a espessura e copie o código.Usar →
Conversor de px para remConverta px em rem, em, pt e porcentagem e vice-versa, com tamanho base ajustável e tabela de referência para CSS.Usar →
Gerador de sublinhado animado para links (CSS)Gere efeitos de sublinhado animado para links e menus em CSS: linha que cresce da esquerda, do centro, que desliza, marca-texto que enche e sublinhado ondulado, com cor, espessura e distância, funcionando também no foco do teclado.Usar →
SVG para data URI (CSS e HTML)Converta código SVG em data URI otimizado para usar em CSS (background-image, mask) e HTML, com codificação URL mais curta que Base64 e prévia da imagem.Usar →
Wireframe de site onlineDesenhe o wireframe (rascunho do layout) de um site ou landing page arrastando blocos prontos: cabeçalho, banner, título, texto, imagem, botão, cards, formulário, vídeo e rodapé, no tamanho de computador ou de celular. Mova, redimensione e baixe em PNG ou SVG.Usar →

SEO e publicação 27

Analisar SEO da página (HTML)Cole o código HTML de uma página e veja o que falta para o SEO: título, meta description, H1, estrutura de títulos, imagens sem alt, canonical, Open Graph, idioma, viewport, links e dados estruturados.Usar →
Aviso de cookies (LGPD) para siteGere o código do aviso de cookies para o seu site, com os botões aceitar e rejeitar com o mesmo destaque, como orienta o guia de cookies da ANPD. O Google Analytics e outros scripts só carregam depois do aceite.Usar →
Checklist para lançar um site (antes de publicar)Lista do que conferir antes de colocar um site no ar: SEO, Google Search Console, celular, velocidade, acessibilidade, LGPD, formulários, WhatsApp, favicon, prévia de link, página 404, HTTPS e redirecionamentos. Marque o que já fez, veja o progresso e baixe a lista. Cada item leva à ferramenta que resolve.Usar →
Gerador e validador de ads.txtMonte o arquivo ads.txt do seu site para o Google AdSense e outras redes de anúncio: domínio do sistema, ID da conta, DIRECT ou RESELLER e ID da autoridade de certificação, com contato e subdomínios. Cole um ads.txt existente para conferir erros linha a linha.Usar →
Gerador de cabeçalhos de segurançaGere os cabeçalhos HTTP de segurança do site (HSTS, Content-Security-Policy, X-Content-Type-Options, Referrer-Policy, Permissions-Policy e proteção contra iframe) para Nginx, Apache, Netlify, Cloudflare Pages e Vercel.Usar →
Gerador de tags hreflangGere as tags hreflang para sites em mais de um idioma ou país (pt-BR, pt-PT, en, es…): link alternate no head, no sitemap XML ou no cabeçalho HTTP, com x-default e verificação dos códigos de idioma e região.Usar →
Gerador de .htaccessGere o arquivo .htaccess para sites em Apache (hospedagens compartilhadas como Hostinger, HostGator, Locaweb): forçar HTTPS, com ou sem www, compressão, cache de imagens, CSS e JS, página de erro 404, bloquear listagem de pastas e proteger arquivos.Usar →
Gerador de link de e-mail (mailto)Crie um link mailto que abre o e-mail já preenchido com destinatário, cópia, cópia oculta, assunto e mensagem, com os acentos e quebras de linha codificados certo. Copie o link, o botão em HTML ou gere o QR Code.Usar →
Gerador de link com UTMMonte links com parâmetros UTM (utm_source, utm_medium, utm_campaign, utm_term, utm_content) para saber no Google Analytics de onde vêm as visitas: Instagram, WhatsApp, e-mail, anúncios e QR codes.Usar →
Gerador de llms.txtCrie o arquivo llms.txt do seu site: nome, resumo e as páginas mais importantes organizadas em seções, no formato proposto em llmstxt.org para ajudar ferramentas de IA a entender o conteúdo do site.Usar →
Gerador de meta tags (SEO)Gere as meta tags de SEO, Open Graph e Twitter do seu site e veja a prévia no Google e no WhatsApp.Usar →
Gerador de política de trocas e devoluções (CDC)Gere a política de trocas e devoluções da sua loja virtual ou física com base no Código de Defesa do Consumidor: arrependimento em 7 dias nas compras pela internet (art. 49), produto com defeito (art. 18), troca por tamanho ou cor, quem paga o frete, como pedir e prazo de reembolso. Texto pronto para o site.Usar →
Gerador de redirecionamentos 301Gere as regras de redirecionamento 301 ou 302 do site para Apache (.htaccess), Nginx, Netlify (_redirects), Vercel (vercel.json), Cloudflare e HTML, a partir de uma lista de endereços antigos e novos.Usar →
Gerador de preload, preconnect e dns-prefetchGere as tags de resource hints que aceleram o carregamento do site: preconnect e dns-prefetch para domínios de terceiros (Google Fonts, analytics, CDN), preload da fonte e da imagem principal com fetchpriority e crossorigin certos, e prefetch da próxima página.Usar →
Gerador de robots.txtCrie o arquivo robots.txt do seu site: libere ou bloqueie robôs de busca e de IA, pastas privadas e informe o sitemap.Usar →
Gerador de schema markup (JSON-LD)Gere dados estruturados JSON-LD do schema.org para FAQ, negócio local, artigo e breadcrumb, prontos para colar no site e melhorar a aparência no Google.Usar →
Gerador de security.txt (RFC 9116)Gere o arquivo security.txt do seu site no formato da RFC 9116: contatos para avisar de falhas de segurança (e-mail, página ou telefone), data de validade, idiomas, política, agradecimentos, chave e o endereço canônico, pronto para salvar em /.well-known/security.txt.Usar →
Gerador de sitemap.xmlCrie o sitemap.xml do seu site a partir de uma lista de páginas: cole os endereços, defina a data de atualização e baixe o arquivo pronto para enviar ao Google Search Console e ao Bing.Usar →
Gerador de termos de uso para siteGere os termos de uso do seu site, loja virtual ou aplicativo em português: quem é o responsável, o que o site oferece, cadastro e senha, regras de uso, conteúdo publicado pelos usuários, propriedade intelectual, compras e pagamentos, limites de responsabilidade, mudanças nos termos e foro. Texto pronto para copiar.Usar →
Gerador de manifest.json (PWA)Gere o arquivo de manifesto do aplicativo web (site.webmanifest ou manifest.json) para o site poder ser instalado na tela inicial do celular: nome, nome curto, cores, modo de exibição, ícones de 192 e 512 px e a tag link para o HTML.Usar →
Link para avaliar no Google (com QR Code)Crie o link que abre direto a janela de avaliação do seu negócio no Google, a partir do Place ID, e gere o QR Code para colocar no balcão, no cardápio ou na nota, mais a mensagem pronta para pedir avaliação no WhatsApp.Usar →
Gerador de mapa do site em HTML (página para visitantes)Transforme a lista de endereços do seu site, ou o próprio sitemap.xml, numa página de mapa do site para visitantes: links agrupados por seção, com nomes legíveis tirados do endereço, em HTML leve e pronto para publicar.Usar →
Prévia do resultado no GoogleVeja como o título e a descrição da sua página aparecem no resultado do Google, no computador e no celular, com a largura em pixels e o aviso de quando o texto vai ser cortado.Usar →
Tempo de carregamento do site por conexãoEstime quanto tempo a sua página leva para carregar no 3G, no 4G e no Wi-Fi a partir do peso (HTML, CSS, JavaScript, imagens e fontes) e do número de arquivos, e veja quanto cada parte pesa e quanto se ganha convertendo as imagens para WebP.Usar →
Testar site em vários tamanhos de telaVeja como o seu site fica no celular, no tablet e no computador ao mesmo tempo: digite o endereço e confira a página em larguras como 360, 390, 768 e 1280 px, lado a lado, com rolagem em cada tela.Usar →
Teste de site responsivo (ver no celular, tablet e computador)Veja como o seu site fica no celular, no tablet e no computador ao mesmo tempo, em tamanhos reais de tela (360, 375, 393, 768, 1366 e 1920 px), com zoom para caber na tela, girar e largura personalizada. Funciona com sites que permitem ser abertos em quadro (iframe) e com o seu localhost.Usar →
Verificador de SEO da página (on-page)Cole o código-fonte de uma página e confira o SEO on-page: título e descrição (tamanho), um único H1 e a ordem dos títulos H1 a H6, imagens sem alt, canonical, lang, viewport, robots, Open Graph, dados estruturados e links, com o que corrigir em cada item.Usar →

Formatar e converter 31

Comparar JSON (diff)Compare dois JSON e veja exatamente o que foi adicionado, removido ou alterado, campo por campo, ignorando a ordem das chaves.Usar →
Conversor camelCase, snake_case e kebab-caseConverta nomes e textos para camelCase, PascalCase, snake_case, kebab-case, CONSTANTE e outros formatos usados em programação.Usar →
Conversor Punycode (domínios com acento)Converta domínios com acentos, ç e emojis para Punycode (xn--) e de volta, como café.com.br para xn--caf-dma.com.br, um domínio por linha.Usar →
CSV para JSONConverta CSV em JSON e JSON em CSV, com detecção de separador (vírgula, ponto e vírgula ou tab).Usar →
CSV para SQL (INSERT e CREATE TABLE)Converta CSV ou dados copiados do Excel em comandos SQL INSERT, com CREATE TABLE e tipos detectados automaticamente, para MySQL, PostgreSQL, SQLite e SQL Server.Usar →
Escapar e desescapar texto (JSON, JS, SQL, regex)Escape aspas, barras e quebras de linha para JSON, JavaScript, SQL, regex, CSV e Unicode, ou faça o caminho de volta.Usar →
Formatar CSS (indentar e embelezar)Formate CSS minificado ou bagunçado online: uma propriedade por linha, recuo de 2 ou 4 espaços ou tab, linha em branco entre as regras e seletores separados, para ler e editar o estilo de qualquer site.Usar →
Formatar HTML (indentar e embelezar)Formate e indente código HTML bagunçado ou minificado online: cada tag no seu nível, com o CSS e o JavaScript de dentro da página formatados junto, escolha de 2 ou 4 espaços ou tab e quebra de linhas longas.Usar →
Formatar JavaScript (indentar e embelezar)Formate JavaScript minificado ou bagunçado online: recuo de 2 ou 4 espaços ou tab, chaves na mesma linha ou na seguinte e quebra de linhas longas, para ler e depurar scripts de qualquer site.Usar →
Formatar JSONFormate, valide e minifique JSON.Usar →
Formatar SQLFormate consultas SQL online: quebra de linha nas cláusulas, indentação, palavras-chave em maiúsculas e opção de minificar.Usar →
Formatar XMLFormate, valide e minifique XML online: indentação automática, aviso de erros de sintaxe e conversão de XML para JSON.Usar →
Gerador de Lorem IpsumTexto de exemplo para layouts e protótipos: parágrafos, frases, palavras, listas ou títulos, em latim ou em português, como texto ou HTML.Usar →
Gerador de tabela HTMLCole dados do Excel, Google Planilhas ou CSV e gere uma tabela HTML pronta para o site, com cabeçalho, listras, bordas, rolagem no celular e estilo CSS, ou só o HTML limpo.Usar →
Gerador de tabela MarkdownMonte tabelas em Markdown visualmente ou cole do Excel e do Google Planilhas, com alinhamento das colunas, para README, GitHub e Notion.Usar →
Codificar HTML (entities)Converta caracteres especiais e acentos em entidades HTML (&amp;lt; &amp;eacute;) e faça o caminho inverso.Usar →
Converter HTML para JSXConverta HTML para JSX do React: class vira className, for vira htmlFor, style vira objeto, atributos em camelCase, tags vazias fechadas e comentários em {/* */}. Opção de gerar o componente pronto.Usar →
HTML para MarkdownConverta HTML em Markdown: títulos, negrito, links, imagens, listas, citações e blocos de código, com estilo de título e de lista à sua escolha.Usar →
HTML para textoTire todas as tags de um código HTML e fique só com o texto, mantendo parágrafos, listas e, se quiser, os endereços dos links.Usar →
Inspecionar caracteres UnicodeVeja o código Unicode (U+), os bytes UTF-8, a entidade HTML e o escape JavaScript de cada caractere ou emoji de um texto, e encontre caracteres invisíveis.Usar →
JSON para CSVConverta uma lista de objetos JSON em CSV para abrir no Excel ou Google Sheets, com objetos aninhados achatados, escolha do separador e download do arquivo.Usar →
JSON para TypeScriptGere interfaces ou types do TypeScript a partir de um JSON, com objetos aninhados, arrays, campos opcionais e nomes em PascalCase.Usar →
JSON para XML (e XML para JSON)Converta JSON em XML e XML em JSON, com atributos, listas e indentação, validando a sintaxe direto no navegador.Usar →
Markdown para HTMLEscreva em Markdown e veja a prévia ao vivo, depois copie o HTML ou baixe o arquivo.Usar →
Minificar e formatar CSSMinifique CSS para deixar o site mais leve ou formate CSS compactado para ler e editar, com a economia em bytes.Usar →
Minificar HTMLMinifique HTML removendo comentários, espaços e quebras de linha desnecessários, preservando <pre>, <textarea>, scripts e estilos, com a economia em bytes.Usar →
Minificar JavaScriptMinifique e comprima código JavaScript com o Terser: remove espaços e comentários e encurta nomes de variáveis, mostrando a economia em bytes.Usar →
Tabela ASCII completaTabela ASCII de 0 a 127 com decimal, hexadecimal, octal, binário, caractere e entidade HTML, com busca e clique para copiar.Usar →
Texto para slugTransforme títulos em URLs amigáveis.Usar →
Visualizador de JSON em árvoreVeja JSON em árvore com nós que abrem e fecham, busca por chave ou valor, contagem de itens e o caminho de cada campo com um clique.Usar →
YAML para JSONConverta YAML em JSON e JSON em YAML, validando a sintaxe e apontando a linha do erro.Usar →

Códigos, hash e redes 25

Analisar URL e parâmetrosSepare uma URL em protocolo, domínio, caminho e parâmetros, veja cada parâmetro decodificado (UTM, fbclid, gclid) e gere a URL limpa.Usar →
Base64Codifique e decodifique texto em Base64.Usar →
Calculadora de chmodMonte permissões de arquivos Linux marcando caixas e veja o número (755, 644) e o formato rwxr-xr-x.Usar →
Calculadora de RAIDCalcule o espaço útil, a redundância e quantos discos podem falhar em RAID 0, 1, 5, 6 e 10, com a quantidade e o tamanho dos discos (HD ou SSD) do seu NAS ou servidor.Usar →
Calculadora de sub-rede IP (CIDR)Calcule máscara, endereço de rede, broadcast, faixa de IPs utilizáveis e número de hosts de uma rede IPv4 em notação CIDR, como 192.168.1.0/24.Usar →
Codificar e decodificar Base32Converta texto para Base32 (RFC 4648) e de volta, com ou sem o preenchimento =, e com suporte a acentos em UTF-8. Útil para chaves de 2FA, nomes de arquivo e identificadores.Usar →
Codificar URLCodifique e decodifique URLs (percent-encoding).Usar →
Conversão de base numéricaConverta entre decimal, binário, octal e hexadecimal.Usar →
Conversor de bytes (KB, MB, GB, TB)Converta entre bytes, KB, MB, GB e TB, nos padrões decimal (1000) e binário (1024), e calcule tempo de download.Usar →
Conversor de IP (IPv4 e IPv6)Converta endereços IPv4 para decimal, hexadecimal e binário e vice-versa, expanda e comprima IPv6, gere o IPv6 mapeado e veja se o IP é privado, público ou reservado.Usar →
Conversor de timestampConverta timestamp Unix em data e vice-versa.Usar →
Decodificar JWTDecodifique tokens JWT e veja o header, o payload e as datas de emissão e expiração em formato legível.Usar →
Explicar expressão cron em portuguêsCole uma expressão cron e veja o que ela quer dizer em português, campo por campo, com as próximas datas em que a tarefa vai rodar.Usar →
Gerador de chaves RSA e ECDSAGere pares de chaves RSA (2048, 3072 ou 4096 bits) e ECDSA (P-256, P-384) no próprio navegador, em formato PEM, para testes, JWT, assinaturas e criptografia.Usar →
Gerador de expressão cronMonte uma expressão cron sem decorar a sintaxe: escolha a frequência, os minutos, as horas e os dias da semana e veja as próximas execuções.Usar →
Gerador de .gitignoreMonte o arquivo .gitignore do seu projeto escolhendo linguagens, frameworks, sistemas e editores: Node, Python, Java, Flutter, macOS, VS Code e mais.Usar →
Gerador de hashCalcule SHA-1, SHA-256 e SHA-512 de um texto.Usar →
Gerador de HMAC (SHA-256, SHA-512)Calcule a assinatura HMAC de uma mensagem com uma chave secreta usando SHA-1, SHA-256, SHA-384 ou SHA-512, com saída em hexadecimal ou Base64, e valide webhooks.Usar →
Gerador de JWT (assinar token HS256)Crie e assine tokens JWT com HS256, HS384 ou HS512 a partir de um payload JSON e de uma chave secreta, com atalhos para iat, exp e sub, e verifique a assinatura de um token existente.Usar →
Gerador de código TOTP (2FA)Gere e confira códigos de autenticação em dois fatores (TOTP, RFC 6238) a partir de uma chave secreta Base32, crie novas chaves e o link otpauth:// para testar logins com 2FA.Usar →
Gerador de UUIDGere UUID v4 aleatórios em lote.Usar →
Hash de arquivo (MD5, SHA-1, SHA-256)Calcule o checksum MD5, SHA-1, SHA-256 e SHA-512 de qualquer arquivo e confira se ele bate com o hash informado no site de download.Usar →
Imagem para Base64Converta imagens em texto Base64 ou Data URI para HTML e CSS.Usar →
Gerador de tabela verdadeMonte a tabela verdade de qualquer expressão lógica com E, OU, NÃO, implicação e bicondicional, e veja se é tautologia ou contradição.Usar →
Testar regexTeste expressões regulares ao vivo, veja as correspondências destacadas, os grupos de captura e o resultado da substituição.Usar →

Dados para teste 9

Gerador de cartão de créditoGere números de cartão de crédito válidos para testes de software (Visa, Mastercard, Elo, Amex) e valide pelo algoritmo de Luhn.Usar →
Gerador e validador de CNHGere número de registro de CNH válido para testes e valide uma CNH.Usar →
Gerador e validador de CNPJGere CNPJ válido para testes, numérico ou no novo formato alfanumérico, e valide um CNPJ.Usar →
Gerador e validador de CPFGere CPF válido para testes e valide um CPF.Usar →
Gerador de pessoaGere pessoas fictícias completas para testes: nome, CPF, RG, nascimento, endereço, telefone e e-mail.Usar →
Gerador e validador de PIS/PASEPGere número de PIS/PASEP/NIS válido para testes e valide um PIS.Usar →
Gerador de placa de carroGere placas de carro aleatórias no padrão Mercosul ou no antigo, para testes, e converta placa antiga para Mercosul.Usar →
Gerador e validador de RENAVAMGere número de RENAVAM válido para testes e valide um RENAVAM.Usar →
Gerador e validador de título de eleitorGere título de eleitor válido para testes, por estado, e valide um título.Usar →

Nenhuma ferramenta encontrada. Tente outra palavra.

Muito obrigado por ajudar!

Cada doação ajuda a manter o site no ar. As ferramentas foram feitas para ajudar você, mas temos gastos com servidores. Se puder ajudar, ajuda muito! Escolha ou digite o valor:

Pagamento seguro pela Stripe. Abre em outra aba.

As ferramentas são oferecidas como estão, sem garantia. Não nos responsabilizamos pelos resultados nem pelo uso que se faz deles.