Gerador de layout CSS Grid e Flexbox

Alterne entre Grid e Flexbox, ajuste o número de colunas e linhas ou a direção e alinhamento dos itens flexíveis e o espaçamento entre eles, com uma prévia ao vivo de caixas coloridas dentro do contêiner, e depois copie o código CSS exato.

Ferramentas de Design e CSS Funciona totalmente no seu navegador

Todo o processamento acontece no seu dispositivo — nada é enviado a um servidor.

Colunas3Linhas2Espaçamento12px

Código CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

Continuar com

Totalmente local

Gerador de clip-path CSS

Escolha uma forma pronta (círculo, triângulo, estrela, balão de mensagem...) e copie o código clip-path.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de curva de aceleração Cubic Bezier

Arraste dois pontos para projetar visualmente uma curva de aceleração personalizada e copie o código cubic-bezier.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Glassmorphism CSS

Projete visualmente um efeito de cartão de vidro fosco e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Ferramentas relacionadas

Totalmente local

Conversor de texto para escrita à mão

Transforme texto digitado em uma imagem que parece escrita à mão em papel pautado, em vários estilos de caligrafia.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de blobs e padrões de fundo SVG

Gere uma forma orgânica aleatória (blob) ou um padrão de fundo repetitivo sem emendas em SVG, e copie ou baixe.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de animações CSS Keyframe

Crie uma animação CSS visualmente (aparecer, deslizar, zoom, saltar, girar, virar) e obtenha código @keyframes pronto para uso.

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de harmonia de paleta de cores

Escolha uma cor base e obtenha uma paleta de cores harmoniosa (complementar, análoga, tríade, tétrade, monocromática).

Ferramentas de Design e CSSAbrir ferramenta

Totalmente local

Gerador de Gradiente Mesh

Crie um fundo de gradiente mesh suave e multiponto com um clique, e copie o código CSS pronto para usar.

Ferramentas de Design e CSSAbrir ferramenta

Pronto para experimentar o Uddatak?

Explore a biblioteca completa de ferramentas e comece a usar o que você precisa agora — grátis, sem cadastro.

Ver todas as ferramentas