Generador de cuadrícula transparente en PNG y SVG
Este generador de cuadrícula dibuja líneas a distancias iguales sobre un fondo transparente, con el tamaño exacto en píxeles que elijas. Defines columnas, filas, grosor y color de línea, y descargas la cuadrícula como PNG o SVG, o la copias como fondo CSS. Sirve como capa guía sobre un diseño, una maqueta o una captura de pantalla. Todo funciona en el navegador y no se sube ningún archivo.
Crear cuadrícula online en cuatro pasos
La cuadrícula se dibuja en la propia página:
- Introduce el Ancho del lienzo (px) y el Alto del lienzo (px). Cada uno va de 10 a 5000 y empieza en 1920 por 1080.
- Ajusta las Columnas (de 1 a 200, empieza en 12) y las Filas (de 1 a 200, empieza en 6).
- Elige el Grosor de línea (px), de 1 a 50, y un Color de línea. Por defecto es rojo, #FF0000.
- Revisa la vista previa y pulsa Descargar PNG, Descargar SVG o Copiar CSS.
No hay botón de aplicar. La vista previa se redibuja mientras escribes, y el fondo de cuadros que ves detrás muestra qué partes del archivo son transparentes. Ese fondo no forma parte de la descarga.
Tamaño de celda según el lienzo, las columnas y las filas
El lienzo se divide a partes iguales: el ancho de cada celda es el ancho entre las columnas, y el alto es el alto entre las filas. El texto «Cada celda mide … × … px» bajo la vista previa muestra el resultado mientras cambias valores. Para celdas cuadradas, elige números que den el mismo tamaño en ambas direcciones. Un lienzo de 1920 × 1080 con 16 columnas y 9 filas da celdas de 120 × 120 px.
Las líneas se dibujan centradas en cada división interior. Si el lienzo no se divide de forma exacta, una línea puede caer entre dos píxeles y verse algo borrosa en el PNG. Para líneas nítidas, usa un ancho que sea múltiplo de las columnas y un alto que sea múltiplo de las filas.
Cuadrícula 3x3 PNG y otros tamaños habituales
Estos son los tamaños que más se piden (ancho × alto, columnas × filas, tamaño de celda):
- Celdas cuadradas en Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Celdas cuadradas en 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Cuadrícula 3x3 cuadrada: 1080 × 1080, 3 × 3, 360 × 360 px
- Cuadrícula 3x3 vertical 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Una cuadrícula PNG transparente de estos tamaños también se conoce como rejilla transparente PNG.
Grosor, color y opciones avanzadas
El grosor de línea es el ancho del trazo en píxeles del lienzo. En un lienzo grande, una línea fina necesita un valor más alto para seguir viéndose cuando la imagen se reduce. El campo de color de línea abre el selector de color de tu navegador y muestra el valor hexadecimal al lado. Elige un color que contraste con lo que hay debajo: blanco sobre un diseño oscuro, un color oscuro sobre uno claro.
En Opciones avanzadas hay tres casillas. Una cuadrícula simple solo tiene líneas en las divisiones interiores, así que los bordes del archivo quedan vacíos.
- Borde exterior añade un marco. Se dibuja dentro del borde del lienzo, por lo que conserva el grosor completo.
- Cruz central añade una línea vertical y otra horizontal por el centro. Con un número par de columnas o filas ya hay una línea en el centro, así que solo notarás el cambio con números impares.
- Líneas diagonales añade dos líneas de esquina a esquina que se cruzan en el centro.
Cuadrícula SVG, fondo CSS y descarga
Descargar PNG guarda una imagen transparente con el tamaño exacto del lienzo, con un nombre como cuadricula-1920x1080.png. Descargar SVG guarda la misma cuadrícula como líneas vectoriales, con un nombre como cuadricula-1920x1080.svg, sin fondo. Copiar CSS pone en el portapapeles una línea background-image: url("data:image/svg+xml,...") y otra de background-size, para que quien desarrolla pueda poner la cuadrícula sobre una página sin un archivo de imagen aparte.
El fondo se repite por defecto. Si lo usas en mosaico, recuerda que la cuadrícula simple no tiene línea en el borde exterior. Con Borde exterior activado, en cada unión se juntan dos bordes y parecen el doble de gruesos que el valor que fijaste.
¿Cuadrícula sobre una foto o código de maquetación CSS?
Para dibujar una cuadrícula sobre una imagen que ya tienes, con el método de la cuadrícula para dibujar, usa el Generador de imágenes con cuadrícula. Si quieres montar una maqueta de página y obtener el código de grid-template-areas, la herramienta adecuada es el Generador de CSS Grid. Esta herramienta sirve para el archivo de cuadrícula en blanco y transparente.
Preguntas frecuentes
¿Cómo crear una cuadrícula PNG con fondo transparente?
Introduce «Ancho del lienzo (px)» y «Alto del lienzo (px)», ajusta «Columnas» y «Filas», elige un «Color de línea» y pulsa «Descargar PNG». El fondo del archivo es transparente. El fondo de cuadros de la vista previa solo sirve para mostrarlo. El archivo se guarda como cuadricula-1920x1080.png, con tu propio tamaño en el nombre.
¿Cómo hacer una cuadrícula 3x3 PNG?
Pon «Columnas» en 3 y «Filas» en 3. Eso dibuja dos líneas verticales y dos horizontales y divide el lienzo en nueve celdas iguales. Activa «Borde exterior» en «Opciones avanzadas» si además quieres un marco en el borde, y pulsa «Descargar PNG».
¿Qué tamaño debe tener un PNG de cuadrícula 9:16?
Pon «Ancho del lienzo (px)» en 1080 y «Alto del lienzo (px)» en 1920 para una imagen vertical a pantalla completa. 2160 por 3840 es la misma proporción 9:16 con el doble de detalle. Ambos caben dentro del límite de 5000 px. El texto bajo la vista previa muestra el tamaño de una celda.
¿Cómo hacer una rejilla transparente PNG de color blanco?
Elige el blanco, #FFFFFF, en «Color de línea». Las líneas blancas pueden costar de ver sobre el fondo de cuadros de la vista previa, pero el PNG descargado las conserva sobre fondo transparente, así que se ven al colocar el archivo sobre una foto o un diseño oscuro.
¿Puedo descargar una cuadrícula SVG?
Sí. Pulsa «Descargar SVG» para guardar la misma cuadrícula como archivo vectorial, por ejemplo cuadricula-1920x1080.svg. Las líneas son trazos del color que elegiste y no hay relleno de fondo, así que se ve nítida con cualquier zoom y se abre en el navegador o en cualquier editor vectorial.
¿Cómo usar la cuadrícula como fondo CSS?
Pulsa «Copiar CSS» y pega el resultado en una regla. Obtienes un background-image con la cuadrícula como SVG en línea, más un background-size igual al tamaño de tu lienzo. Cambia background-size para escalarla, o usa un lienzo pequeño y deja que el fondo se repita. Sin «Borde exterior», los bordes de cada mosaico no tienen línea.
¿Cómo añadir una cuadrícula en Illustrator o Figma?
Las dos tienen sus propias cuadrículas y guías. Usa este generador cuando necesites una cuadrícula como archivo con un tamaño exacto. Abre el SVG en Illustrator para conservar las líneas como vectores, o coloca el PNG sobre tu diseño como capa transparente. En Figma puedes añadir cualquiera de los dos archivos a un frame.
¿Por qué mi PNG sale más pequeño en iPhone o iPad?
Safari en iPhone y iPad devuelve una imagen en blanco por encima de unos 16 millones de píxeles, así que el PNG se reduce para que quepa y un aviso indica el tamaño con el que se guardó. El SVG conserva siempre el tamaño completo que pediste, úsalo cuando necesites las dimensiones exactas.
Recomendado
-
Portaminas Pentel GraphGear 500Esboza primero el diseño en papel, con trazos finos que sigan tu cuadrícula
-
Cuaderno Leuchtturm1917 A5 de puntosEsboza tus pantallas en una cuadrícula de puntos antes de abrir Figma
-
Tableta gráfica Wacom Intuos SDibuja a mano sobre tu capa de cuadrícula, con un lápiz que mueve el cursor
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
