Generador de imágenes placeholder con patrones y estilos

Crea imágenes de relleno a medida para maquetar: eliges el tamaño (o una proporción como 16:9, 9:16, 1:1, 4:3…), un patrón de fondo, los colores y el texto que quieras mostrar. La vista previa se actualiza al instante.

Cuando te guste, la copias como SVG, como etiqueta HTML, como regla CSS de fondo o como componente de React, y también puedes descargarla en SVG o en PNG.

Gratis · sin marca de agua · sin subir archivos

Qué puedes hacer con Generador de imágenes placeholder

  • Ancho y alto libres o proporciones predefinidas (16:9, 9:16, 1:1, 4:3…)
  • Patrones: sólido, gradiente, puntos, cuadrícula, diagonales, ruido y blueprint
  • Colores personalizables y presets de paletas
  • Texto personalizable sobre la imagen
  • Copia como SVG, HTML, CSS o componente React
  • Descarga en SVG o PNG

Cómo usar Generador de imágenes placeholder paso a paso

  1. 1

    Ajusta tamaño, patrón y colores

    Elige las dimensiones o una proporción, un patrón, los colores y el texto.

  2. 2

    Copia o descarga

    Copia el código (SVG, HTML, CSS o React) o descarga la imagen en SVG o PNG.

Placeholders a medida, sin depender de un servicio externo

Los placeholders sirven para ver cómo queda un diseño antes de tener las imágenes definitivas. Lo habitual es tirar de un servicio online que devuelve la imagen desde su servidor, lo que añade una dependencia externa y una petición de red por cada imagen.

Aquí la imagen se genera como SVG en tu propio navegador, así que no depende de que ningún servicio siga vivo: te llevas el código o el archivo y lo usas donde quieras.

SVG, PNG, HTML, CSS o React

El mismo placeholder se exporta en varios formatos según dónde lo vayas a usar: el SVG para incrustarlo o editarlo, el PNG para un archivo de imagen, la etiqueta HTML lista para pegar, la regla CSS para usarlo como fondo, o un componente de React reutilizable. Todo se genera localmente, sin subir nada.

Preguntas frecuentes

¿Qué patrones y estilos puedo usar?

Color sólido, gradiente, puntos, cuadrícula, líneas diagonales, textura de ruido y estilo blueprint, con colores personalizables o partiendo de un preset de paleta, y con texto propio encima.

¿En qué formatos puedo exportar?

Puedes copiar el resultado como SVG, como etiqueta HTML, como regla CSS de fondo o como componente de React, y descargarlo como archivo SVG o PNG.

¿Se genera en un servidor?

No. La imagen se crea como SVG con código que se ejecuta en tu navegador; no se sube ni se descarga nada de ningún servidor.

Otras herramientas que te pueden servir

Open Utils es un proyecto de código abierto con licencia MIT. Puedes revisar exactamente qué hace esta herramienta —y comprobar que tus archivos no se envían a ninguna parte— en el repositorio en GitHub.