Cómo usarlo

May 2, 2026 · View on GitHub


GH Contributors Codecov Issues GH pull requests

English · 한국어 · Español · Français · Deutsch
简体中文 · 繁體中文 · 繁體粤语 · Português (Brasileiro) · 日本語 · മലയാളം


Tip

Compatible con el simple Generator. Sin embargo, recomiendo leer el README para ajustes más detallados.

Important

This service is provided on a best-effort basis and may be unstable due to usage limits or traffic spikes.

For reliable use, please fork the repository and deploy it to your own Vercel instance (or another hosting platform).

  1. Cómo usarlo
  2. Tipos
  3. Colores
  4. Lista de colores personalizada
  5. Sección
  6. Tema
  7. Reversión
  8. Altura
  9. Texto
  10. Descripción
  11. Fondo del texto
  12. Animación del texto
  13. Color de fuente
  14. Tamaño de fuente
  15. Alineación horizontal del texto
  16. Alineación vertical del texto
  17. Tamaño de la descripción
  18. Alineación horizontal de la descripción
  19. Alineación vertical de la descripción
  20. Rotación
  21. Contorno del texto
  22. Ancho del contorno del texto
  23. Demo

Cualquier idea -> Idea-Issue or PR

Cómo usarlo

https://capsule-render.vercel.app/api?

Solo escribe el parámetro de consulta al final de esta URL. Como esto:

Markdown:

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

HTML:

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />

Tipos

Tipos de datos que hacen que cambie la imagen de fondo.

Escribe &type= en la URL

![header](https://capsule-render.vercel.app/api?type=slice)

Colores

Cambia la imagen de fondo!

  • &color=auto : Color aleatorio. La lista de colores está aquí
  • &color=timeAuto : Color aleatorio, pero cambia con el tiempo.
  • &color=random : Color muy aleatorio. No se sabe que colores mostrará.
  • &color=gradient : Gradiente aleatorio. La lista de gradientes está aquí
  • &color=timeGradient : Gradiente aleatorio, pero cambia con el tiempo.
  • &color=_hexcode : por defecto (#B897FF)
  • &color=_custom_gradient : Gradiente personalizado. Si se escribe como &color=0:EEFF00,100:a82da8, se convertirá en { 0%: 'EEFF00', 100%: 'a82da8' }. (e.g. DEMO)

Si se utiliza el modo auto. no es necesario cambiar fontColor. auto también cambia fontColor.

![header](https://capsule-render.vercel.app/api?color=auto)

Si se usa color estático. No se debe escribir '#'

¿Cuando se utiliza timeAuto y timeGradient?

Se utiliza la sección header y footer al mismo tiempo.

Lista de colores personalizada

Puedes personalizar la lista de colores que aparecerá aleatoriamente solo para &color=auto y &color=gradient.

Escribe &customColorList= en la URL.

Elige los patrones de color que deseas y recuerda el valor idx.

Por ejemplo, si los valores de idx son 0, 2 y 3, escribe: &customColorList=0,2,3

Si deseas que aparezcan muchas veces idx=2, puedes escribirlo repetidamente. (e.g. &customColorList=0,2,2,2,2,3)

![header](https://capsule-render.vercel.app/api?color=gradient&customColorList=0,2,2,5,30)

Tema

Puedes usar la combinación especificada usando theme=.

Incluso si se utiliza color y fontColor, el tema tiene la mayor prioridad.

Verifica la lista de temas disponibles en pallete_theme.json.

![reversal](https://capsule-render.vercel.app/api?type=rect&text=RECT&fontAlign=30&fontSize=30&desc=Use%20theme&descAlign=60&descAlignY=50&theme=radical)

Actualmente estoy agregando combinaciones de Link:theme poco a poco.

Sección

La sección de datos crea una imagen de fondo invertida.

  • &section=header : (por defecto)
  • &section=footer

Escribe &section= en la URL

![footer](https://capsule-render.vercel.app/api?section=footer)

Reversión

Invierte la imagen de izquierda a derecha. (Color al mismo tiempo)

  • &reversal=false : (por defecto)
  • &reversal=true
![reversal](https://capsule-render.vercel.app/api?type=slice&reversal=true&color=gradient)

Altura

Cambia el tamaño de la imagen. El valor predeterminado es 120.

Escribe &height= en la URL

![header](https://capsule-render.vercel.app/api?height=400)

No escribas px

Texto

Ingresa texto sobre la imagen.

Escribe algo &text= .

![header](https://capsule-render.vercel.app/api?text=Hello%World!)

No puedes usar algunos caracteres especiales. Como '#', '&', '/' ...

Esto confunde a la API

Se recomienda usar %20 (espacio) y -nl- (nueva linea) solamente

Descripción

Ingresa texto debajo de la imagen.

Escribe algo &desc= .

![header](https://capsule-render.vercel.app/api?height=400&text=Hello%20World!&desc=Hello%20capsule%20render)

No puedes usar algunos caracteres especiales. Como '#', '&', '/' ...

Esto confunde a la API

Se recomienda usar %20 (espacio) y -nl- (nueva linea) solamente

Fondo del texto

Fondo del texto.

Escribe &textBg=true para activarlo.

Si deseas aumentar el tamaño del fondo, agrega %20 entre los valores del texto. Esto es porque el tamaño del fondo depende de la longitud del texto en inglés. (%20 significa el espacio)

![header](https://capsule-render.vercel.app/api?type=rounded&color=gradient&text=%20asdf%20&height=300&fontSize=100&textBg=true)

Animación del texto

Hace que el texto sea animado.

Escribe &animation= si deseas usarlo.

  • fadeIn : fadeIn 1.2s
  • scaleIn : scaleIn .8s
  • blink : blink .6s
  • blinking : blinking 1.6s
  • twinkling : twinkling 4s
![header](https://capsule-render.vercel.app/api?text=capsule_render&animation=fadeIn)

Color de fuente

Cambia el color de la fuente. El valor predeterminado es 000000.

El valor debe ser un código hexadecimal sin el simbolo '#'

Escribe &fontColor= detrás de la consulta Text

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)

FontFamily

Change text font family.

Write &fontFamily= behind Text query.

Use %20 for spaces in font names.

fontFamily is applied as CSS font-family, but actual rendering depends on fonts available in the rendering environment. If a font is unavailable, fallback fonts are used.

![header](https://capsule-render.vercel.app/api?text=Hello%20World!&fontFamily=Segoe%20UI)

Tamaño de fuente

Cambia el tamaño de la fuente. El valor predeterminado es 70.

Escribe &fontSize= detrás de la consulta Text

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)

No escribas px

Alineación horizontal del texto

Cambia el alineamiento horizontal (x). Escribe un número entre 0~100

&fontAlign= : El valor por defecto es 50. centro de la imagen

En caso de que haya varias líneas en &text= (-nl-), proporcionar múltiples &fontAlign= aplicará diferentes alineamientos horizontales a cada línea individualmente.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70)

Alineación vertical del texto

Cambia el alineamiento vertical (y). Escribe un número entre 0~100

&fontAlignY= : El valor por defecto es 50 (centro de la imagen). Para múltiples líneas (separadas por -nl-), el valor por defecto se calculará para que las líneas se superpongan una sobre la otra y estén centradas.

En caso de que hayan multiples lineas en &text= (-nl-), proporcionar multiples &fontAlignY= aplicará diferentes alineamientos verticales a cada línea individualmente.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)

Tamaño de la descripción

Cambia el tamaño de la fuente de la descripción. El valor predeterminado es 20.

Escribe &descSize= detrás de la consulta desc

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)

No escribas px

Alineación horizontal de la descripción

Cambia el alineamiento horizontal (x). Escribe un número entre 0~100

&descAlign= : El valor por defecto es 50. centro de la imagen

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70&desc=Desc&descAlign=20)

Alineación vertical de la descripción

Cambia el alineamiento vertical (y). Escribe un número entre 0~100

&descAlignY= : El valor por defecto es 60. centro de la imagen

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20&desc=Desc&descAlignY=40)

Rotación

Utiliza &rotate= para rotar el texto.

También puedes usar números negativos.

Se recomienda usar números entre 0 ~ 360, 0 ~ -360.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=20&rotate=-30)

Contorno del texto

Cambia el Contorno del texto. (stroke)

Escribe &stroke= detrás de la consulta

El valor debe ser un código hexadecimal sin el simbolo '#'

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00)

Se recomienda utilizarlo con strokeWidth.

Cuando se utiliza solo, strokeWidth por defecto es 1.

Ancho del contorno del texto

Cambia el Ancho del contorno del texto. (stroke-width)

Escribe &strokeWidth= detrás de la consulta stroke

El valor debe ser mayor o igual a 0.

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00&strokeWidth=3)

Se recomienda utilizarlo con stroke.

Cuando se utiliza solo, el stroke por defecto es 'B897FF'.

Demo

Wave

wave

Egg

egg

Shark

shark

Slice

slice

Rect

rect

Soft

soft

Rounded

rounded

Cylinder

cylinder

Waving

waving

Transparent

transparent

Venom

venom

Speech

speech

Blur

blur