Generador de imágenes de marcador de posición gratis
Genere imágenes de marcadores de posición en colores con dimensiones, texto y colores personalizados. Tamaños estándar para redes sociales, maquetas y composiciones de diseño.
Tamaños predefinidos
Temas de color
💡 Para maquetas HTML: usa la opción «Copiar como data URL» y pégala en <img src="..."> para marcadores de posición en línea. Para diseños en Figma / Sketch, descarga el PNG y arrástralo.
Usos habituales
- Imágenes de Marcador para Mockups de DiseñoGenera cajas de colores dimensionadas para usar en Figma, Sketch o mockups de diseño web antes de que estén listas las imágenes reales.
- Marcadores en Línea para Prototipos HTMLUsa "Copiar como URL de datos" para incrustar imágenes marcadoras directamente en HTML para prototipos rápidos.
- Marcadores para Espacios de Contenido de CMSAl demostrar una plantilla de CMS, usa imágenes marcadoras en lugar de contenido real para vistas previas sensibles.
- Plantillas de Imagen de Redes SocialesGenera marcadores de tamaño correcto para plantillas de posts de Instagram, Facebook, Twitter y LinkedIn.
- Imágenes de Prueba de Diseño CSSGenera imágenes en proporciones de aspecto extremas para probar diseños CSS responsivos.
Cómo funciona
Todo ocurre en tu navegador usando la API Canvas HTML y marcado SVG escrito a mano: sin servidor, sin subida, sin servicio de terceros. Fijas dimensiones, colores y texto de etiqueta, y la herramienta pinta la imagen directamente en un elemento canvas en tiempo real, y luego la serializa a PNG, JPEG o SVG bajo demanda.
- 1Configura dimensiones y coloresEscribe un ancho y alto (1–4000 px cada uno), o elige uno de los once preajustes que cubren tamaños comunes de redes sociales y diseño. Elige un color de fondo y de texto de los temas integrados o introduce cualquier valor hexadecimal directamente; un selector de color nativo y un campo de texto validado se mantienen sincronizados.
- 2La API Canvas renderiza la vista previa al instanteUn efecto de React llama a drawPlaceholder() con cada cambio. Esta función usa CanvasRenderingContext2D para rellenar el rectángulo con el color de fondo, opcionalmente dibujar líneas diagonales tenues de cruz a 15% de opacidad, y luego medir y centrar tu texto de etiqueta, reduciendo automáticamente la fuente hasta que quepa dentro del 90% del ancho del lienzo.
- 3Exporta como PNG, JPEG o SVGLas descargas PNG y JPEG llaman a canvas.toDataURL(), convierten el resultado en base64 a un Blob en memoria, y disparan la descarga; todo de forma síncrona dentro del gesto del usuario para que se cumplan las reglas de descarga de iOS Safari. La exportación SVG construye una cadena SVG autocontenida con un rect coincidente, líneas diagonales opcionales, y un elemento text, y luego lo guarda como archivo .svg.
- 4Atajos de exportación en lote y de copiaEl botón 'Descargar todos los preajustes' importa dinámicamente JSZip, vuelve a renderizar cada uno de los once tamaños preajustados en un lienzo fuera de pantalla usando la misma función de dibujo, y empaqueta todos los PNG en un único ZIP. Los botones de copiar emiten una URL de datos PNG, una etiqueta img SVG en línea, o una declaración background-image de CSS para pegar de inmediato en código.
Herramientas relacionadas
Generador Lorem Ipsum
Genera texto de marcador de posición de Lorem Ipsum. Elige palabras, oraciones o párrafos. Copia en un clic.
Compresor de imágenes
Comprime imágenes JPG, PNG, WebP y AVIF. Ver comparación antes/después.
Redimensionador de imágenes
Redimensiona imágenes por dimensiones o porcentaje. Mantén la relación de aspecto, elige formato de salida, sin pérdida de calidad.