How to Use

May 2, 2026 · View on GitHub


GH Contributors Codecov Issues GH pull requests

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


Tip

Unterstützt einen einfachen Generator. Wir empfehlen jedoch, die README-Datei zu lesen, um genauere Einstellungen vorzunehmen.

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. Anleitung
  2. Arten
  3. Farben
  4. Benutzerdefinierte Farbliste
  5. Abschnitte
  6. Reversal
  7. Höhe
  8. Text
  9. Beschreibung
  10. Text Hintergrund
  11. Text Animation
  12. Textfarbe
  13. Textgröße
  14. Textausrichtung - X
  15. Textausrichtung - Y
  16. Größe der Beschreibung
  17. Beschreibung Ausrichtung - X
  18. Beschreibung Ausrichtung - Y
  19. Drehen
  20. Demo

Ideen -> Idea-Issue oder PR

How to Use

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

Schreibt einfach die Parameter der Query an das Ende der Url, wie hier:

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" />

Arten

Diesen Arten können angegeben werden, um den Hintergrund zu ändern:

Schreibe &type= in die URL:

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

Farben

Ändert die Hintergrundfarbe:

  • &color=auto : Zufällige Farbe. Die Liste der Farben findet man hier
  • &color=timeAuto : Zufällig Farbe, die von der Tageszeit bestimmt wird.
  • &color=random : Komplett zufällige Farben, ich weiss nicht, welche Kombination dann gezeigt werden.
  • &color=gradient : Zufälliger Farbübergang. Liste ist hier
  • &color=timeGradient : Zufällig Farbübergang, der von der Tageszeit bestimmt wird.
  • &color=_hexcode : Standardfarbe(#B897FF)
  • &color=_custom_gradient : Benutzerdefinierter Farbübergang. Wenn du &color=0:EEFF00,100:a82da8 schreibst, wird es zu { 0%: 'EEFF00', 100%: 'a82da8' } konvertiert. (z.B. DEMO)

Wenn auto mode genutzt wird, muss die fontColor (Textfarbe) nicht geändert werden, sie wird automatisch angepasst.

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

Schreib nicht '#', wenn du statische Farben benutzt.

Wenn du timeAuto und timeGradient benutzt?

Hier wurde der header und footer Abschnitt gleichzeitig benutzt.

Benutzerdefinierte Farbliste

Du kannst die Liste der Farben anpassen, die nur bei &color=auto und &color=gradient zufällig erscheinen wird.

Schreib &customColorList= in die URL.

Such dir ein Farbmuster aus und merke dir den idx Wert.

Wenn die idx Werte zum Beispiel 0, 2 und 3 sind, schreib: &customColorList=0,2,3

Wenn idx=2 oft vorkommen soll, kannst du den Wert mehrfach reinschreiben. (z.B. &customColorList=0,2,2,2,2,3)

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

Theme

Du kannst die angegebene Kombination mit theme= benutzen.

Auch wenn color und fontColor benutzt werden, hat theme die höchste Priorität.

Du kannst dir eine Liste erhältlicher themes anschauen: 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)

Ich füge aktuell Kombination von Link:theme nach und nach hinzu.

Abschnitt

Die Abschnittsdaten ergeben ein umgekehrtes Hintergrundbild.

  • &section=header : (Standard)
  • &section=footer

Schreib &section= in die URL

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

Reversal

Dreht das Bild nach links und rechts um (Auch gleichzeitig die Farben).

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

Höhe

Ändert die Größe des Bildes. Der Standardwert ist 120.

Schreib &height= in die URL.

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

Schreib nicht px

Text

Fügt Text auf dem Bild ein

Schreibe etwas mit &text= .

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

Manche Sonderzeichen wie '#', '&', '/'... können nicht benutzt werden.

Es verwirrt sonst die API.

Es wird empfohlen, nur %20 (Leerzeichen) und -nl- (Zeilenumbruch) zu benutzen.

Beschreibung

Fügt eine Beschreibung für das Bild ein.

Schreib etwas mit &desc= .

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

Manche Sonderzeichen wie '#', '&', '/'... können nicht benutzt werden.

Es verwirrt sonst die API.

Es wird empfohlen, nur %20 (Leerzeichen) und -nl- (Zeilenumbruch) zu benutzen.

Text Hintergrund

Bestimmt den Hintergrund des Textes

Scchreibe zum Aktivieren &textBg=true.

Wenn du die Größe des Hintergrunds ändern willst, füge %20 im Text hinzu. Das liegt daran, dass die Hintergrundgröße von der Länge des englischen Textes abhängt. (%20 bedeutet Abstand)

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

Text Animation

Macht den Text dynamisch.

Schreibe &animation= , wenn du es benutzen willst.

  • 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)

FontColor

Ändert die Textfarbe. Der Standardwert ist 000000.

Der Wert sollte ein Hexcode ohne '#' sein. Schreib &fontColor= hinter den Text Parameter

![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)

FontSize

Ändert die Textgröße. Der Standardwert ist 70.

Schreibe &fontSize= hinter den Text Parameter

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

Schreib nicht px

FontAlign

Ändert die horizontale Ausrichtung (x) vom Text. Benutze eine Zahl zwischen 0~100

&fontAlign= : Standardwert ist 50, die Mitte vom Bild.

Falls es mehrere Zeilen in &text= (-nl-) gibt, wird durch die Angabe mehrerer &fontAlign= jede Zeile einzeln horizontal ausgerichtet.

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

FontAlignY

Ändert die vertikale Ausrichtung des Textes (y). Benutze eine Zahl zwischen 0~100

&fontAlignY= : Standardwert für eine Zeile ist 50 (Mitte des Bildes). Für mehrere Zeilen (getrennt durch -nl-) wird der Standardwert so berechnet, dass die Zeilen übereinander gestapelt und zentriert werden.

Falls mehrere Zeilen in &text= (-nl-) vorhanden sind, wird bei Angabe mehrerer &fontAlignY= jede Zeile einzeln vertikal ausgerichtet. Falls mehrere Zeilen in &text= (-nl-) vorhanden sind, wird bei Angabe mehrerer &fontAlignY= jede Zeile einzeln vertikal ausgerichtet.

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

DescSize

Ändert die Schriftgröße der Beschreibung. Der Standardwert ist 20.

Schreib &descSize= hinter den desc Parameter

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

Schreib nicht px

DescAlign

Ändert die horizontale Ausrichtung von der Beschreibung. Benutze eine Nummer zwischen 0~100.

&descAlign= : Der Standardwert ist 50, die Mitte des Bildes.

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

DescAlignY

Ändert die vertikale Ausrichtung der Beschreibung. Benutze eine Nummer zwischen 0~100.

&descAlignY= : Der Standardwert ist 60, die Mitte des Bildes.

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

Rotate

Benutze &rotate= , um einen Text zu drehen.

Du kannst auch negative Zahlen benutzen.

Empfohlener Zahlenbereich ☞ 0 ~ 360, 0 ~ -360.

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

Stroke

Ändert die Schriftart.

Schreib &stroke= hinter die Anfrage

Der Wert sollte ein Hexcode ohne '#' sein.

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

Es wird empfohlen es mit strokeWidth zusammmen zu benutzen.

Wenn es alleine benutzt wird, setzt sich strokeWidth auf 1.

Stroke-width

Ändert die Strichstärke des Textes.

Schreib &strokeWidth= hinter den stroke Parameter

Wert muss größer oder gleich 0 sein.

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

Es wird empfohlen es mit stroke zusammen zu benutzen.

Wenn es alleine benutzt wird, setzt sich stroke auf '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