Geradores de CSS e Ferramentas de HTML
Geradores para o CSS que a gente costuma escrever por tentativa e erro: gradientes, sombras, layouts com grid e flexbox, animações com keyframes, valores clamp para tipografia fluida, triângulos feitos de bordas. Cada um mostra uma prévia ao vivo ao lado da regra gerada, o que é bem melhor do que salvar e recarregar para mover uma sombra em dois pixels. Formatadores e minificadores de HTML e CSS também ficam aqui, para arrumar o que você colar de volta.
Ferramentas desta categoria
- Formatador HTML Embeleze e minifique HTML com a indentação correta no seu navegador.
- Formatador CSS Embeleze e minifique CSS com indentação limpa direto no seu navegador.
- Formatador de JavaScript Embeleze e formate JavaScript com indentação limpa e consistente direto no seu navegador.
- Playground do Prettier Formate JavaScript, TypeScript, CSS, JSON, HTML e Markdown com o Prettier direto no navegador e ajuste as opções do Prettier ao vivo.
- Gerador de CSS Grid Monte um layout de CSS Grid visualmente com pré-visualização ao vivo e copie o CSS gerado — defina colunas, linhas, tamanhos de faixa, espaçamentos e alinhamento.
- Gerador de Flexbox Monte visualmente um layout CSS Flexbox com pré-visualização ao vivo e copie o CSS flex gerado — defina flex-direction, flex-wrap, justify-content, align-items, align-content, gap e a quantidade de itens.
- Gerador de Triângulo CSS Gere um triângulo em CSS com o truque clássico das bordas — escolha a direção, defina o tamanho, escolha uma cor, veja uma prévia ao vivo e copie o CSS com width:0; height:0; border.
- Gerador de CSS Transform Monte transformações CSS visualmente — translate, rotate, scale, skew, além de perspective e transform-origin. Arraste os controles, veja a prévia ao vivo e copie o CSS de transform pronto.
- Gerador de Animação CSS Crie animações de keyframes CSS de forma visual. Escolha um preset como fade, slide, bounce, pulse, spin ou shake, ajuste a duração, a função de tempo, o atraso, o número de repetições e a direção, veja uma prévia ao vivo executando a animação e copie o CSS completo com @keyframes e a propriedade animation.
- SVG para CSS Converta código SVG bruto em uma data URI pronta para CSS. Receba a versão base64 e a versão URL-encoded, mais compacta, uma declaração background-image pronta para copiar em cada uma, o tamanho em bytes de cada codificação para você escolher a menor e uma prévia ao vivo do seu SVG.
- Otimizador de SVG Cole o código SVG e otimize-o com o SVGO para remover comentários, metadados de editores e dados redundantes. Veja a economia de bytes antes e depois, a redução percentual, o SVG minificado e uma prévia ao vivo, tudo no seu navegador.
- Visualizador de SVG Cole o código SVG ou envie um arquivo SVG para vê-lo em uma prévia grande, com zoom, fundo alternável (xadrez, claro ou escuro) e a leitura da largura, altura e viewBox originais. Baixe o SVG ou exporte como PNG, tudo no seu navegador.
- SVG para Data URI Converta código SVG em uma data URI pronta para usar direto no src de uma img, em um atributo HTML, em uma string JavaScript ou na barra de endereços do navegador. Escolha URL-encoded ou Base64, copie a data URI pronta ou uma tag img completa e veja uma prévia ao vivo, tudo no seu navegador.