Gerador de grade transparente em PNG e SVG
Este gerador de grade desenha linhas com espaçamento igual sobre um fundo transparente, exatamente no tamanho em pixels que você escolher. Você define colunas, linhas, espessura e cor da linha, e baixa a grade como PNG ou SVG, ou a copia como fundo CSS. Ela serve como camada de guia sobre uma arte, um layout ou uma captura de tela. Tudo roda no navegador e nenhum arquivo é enviado.
Criar grade online em quatro passos
A grade é desenhada na própria página:
- Digite a Largura da tela (px) e a Altura da tela (px). Cada uma vai de 10 a 5000 e começa em 1920 por 1080.
- Defina as Colunas (de 1 a 200, começa em 12) e as Linhas (de 1 a 200, começa em 6).
- Escolha a Espessura da linha (px), de 1 a 50, e uma Cor da linha. O padrão é vermelho, #FF0000.
- Confira a prévia e depois pressione Baixar PNG, Baixar SVG ou Copiar CSS.
Não existe botão de aplicar. A prévia é redesenhada enquanto você digita, e o fundo quadriculado atrás dela mostra quais partes do arquivo são transparentes. Esse quadriculado não faz parte do arquivo baixado.
Tamanho da célula pela tela, colunas e linhas
A tela é dividida em partes iguais: a largura de cada célula é a largura dividida pelas colunas, e a altura é a altura dividida pelas linhas. O texto “Cada célula tem … × … px” abaixo da prévia mostra o resultado enquanto você muda os valores. Para células quadradas, escolha números que deem o mesmo tamanho nos dois sentidos. Uma tela de 1920 × 1080 com 16 colunas e 9 linhas dá células de 120 × 120 px.
As linhas ficam centralizadas em cada divisão interna. Se a tela não se divide exatamente, uma linha pode cair entre dois pixels e parecer um pouco borrada no PNG. Para linhas nítidas, escolha uma largura que seja múltipla do número de colunas e uma altura que seja múltipla do número de linhas.
Grid 3x3 PNG e outros tamanhos comuns
Estes são os tamanhos mais pedidos (largura × altura, colunas × linhas, tamanho da célula):
- Células quadradas em Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Células quadradas em 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Grid 3x3 quadrado: 1080 × 1080, 3 × 3, 360 × 360 px
- Grid 3x3 vertical 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Uma grade transparente PNG nesses tamanhos já entra direto como camada de guia.
Espessura, cor e opções avançadas
A espessura da linha é a largura do traço em pixels da tela. Em uma tela grande, uma linha fina precisa de um valor maior para continuar visível quando a imagem é reduzida. O campo da cor da linha abre o seletor de cores do seu navegador e mostra o valor hexadecimal ao lado. Escolha uma cor que contraste com o que fica embaixo: branco sobre arte escura, uma cor escura sobre arte clara.
Em Opções avançadas há três caixas de seleção. Uma grade simples só tem linhas nas divisões internas, então as bordas do arquivo ficam vazias.
- Borda externa adiciona uma moldura. Ela é desenhada dentro da borda da tela e por isso mantém a espessura total.
- Cruz central adiciona uma linha vertical e uma horizontal pelo meio. Com número par de colunas ou linhas já existe uma linha no centro, então a mudança só aparece com números ímpares.
- Linhas diagonais adiciona duas linhas de canto a canto que se cruzam no centro.
Grade SVG e grid CSS background
Baixar PNG salva uma imagem transparente exatamente no tamanho da tela, com um nome como grade-1920x1080.png. Baixar SVG salva a mesma grade como linhas vetoriais, com um nome como grade-1920x1080.svg, sem fundo. Copiar CSS coloca na área de transferência uma linha background-image: url("data:image/svg+xml,...") e uma linha background-size, para que quem desenvolve possa colocar a grade sobre uma página sem um arquivo de imagem separado.
O fundo se repete por padrão. Se você o usar em mosaico, lembre que a grade simples não tem linha na borda externa. Com a Borda externa ativada, duas bordas se encontram em cada emenda e parecem ter cerca de o dobro da espessura que você definiu.
Grade para foto ou grid para Figma, e código de layout CSS
Para desenhar uma grade sobre uma imagem que você já tem, no método da grade para desenhar, use o Gerador de Imagem com Grade. Se você quer montar o layout de uma página e obter o código de grid-template-areas, use o Gerador de CSS Grid. Esta ferramenta serve para o arquivo de grade vazio e transparente.
Quem prefere o termo em inglês também a encontra como gerador de grid. O arquivo pode ser usado como grid para Figma, colocando o PNG ou o SVG em um frame.
Perguntas frequentes
Como criar uma grade PNG com fundo transparente?
Digite “Largura da tela (px)” e “Altura da tela (px)”, defina “Colunas” e “Linhas”, escolha uma “Cor da linha” e pressione “Baixar PNG”. O fundo do arquivo é transparente. O quadriculado da prévia serve só para mostrar isso. O arquivo é salvo com um nome como grade-1920x1080.png, com o seu tamanho no nome.
Como fazer um grid 3x3 PNG?
Defina “Colunas” como 3 e “Linhas” como 3. Isso desenha duas linhas verticais e duas horizontais e divide a tela em nove células iguais. Ative “Borda externa” em “Opções avançadas” se também quiser uma moldura na borda, e pressione “Baixar PNG”.
Qual deve ser o tamanho de uma grade PNG em 9:16?
Defina “Largura da tela (px)” como 1080 e “Altura da tela (px)” como 1920 para uma imagem vertical em tela cheia. 2160 por 3840 é o mesmo formato 9:16 com o dobro de detalhe. Os dois cabem dentro do limite de 5000 px. O texto abaixo da prévia mostra o tamanho de uma célula.
Como fazer uma grade branca de sobreposição?
Escolha branco, #FFFFFF, em “Cor da linha”. Linhas brancas podem ser difíceis de ver no quadriculado da prévia, mas o PNG baixado as mantém sobre fundo transparente, então elas aparecem quando você coloca o arquivo sobre uma foto ou um layout escuro.
Dá para fazer uma grade SVG?
Dá. Pressione “Baixar SVG” para salvar a mesma grade como arquivo vetorial, por exemplo grade-1920x1080.svg. As linhas são traços na cor que você escolheu e não há preenchimento de fundo, então ela fica nítida em qualquer zoom e abre no navegador ou em qualquer editor vetorial.
Como usar a grade como fundo CSS?
Pressione “Copiar CSS” e cole o resultado em uma regra. Você recebe um background-image com a grade como SVG embutido, mais um background-size igual ao tamanho da sua tela. Mude o background-size para escalar a grade, ou use uma tela pequena e deixe o fundo se repetir. Sem “Borda externa”, as bordas dos blocos não têm linha.
Como adicionar uma grade no Illustrator ou no Figma?
Os dois têm grades e guias próprias. Use este gerador quando quiser uma grade como arquivo em um tamanho exato. Abra o SVG no Illustrator para manter as linhas como vetores, ou coloque o PNG sobre a sua arte como camada transparente. No Figma, você pode adicionar qualquer um dos arquivos a um frame.
Por que meu PNG fica menor no iPhone ou no iPad?
O Safari no iPhone e no iPad devolve uma imagem em branco acima de cerca de 16 milhões de pixels, então o PNG é reduzido para caber e um aviso mostra o tamanho em que foi salvo. O SVG sempre mantém o tamanho completo que você pediu, use-o quando precisar das dimensões exatas.
