Repository files navigation

English ·한국어 .Français .Deutsch .简体中文 .繁體中文 .繁體粤语 .Português (Brasileiro) .日本語

Looking for someone to translate this README.

Supports simpleGenerator.However, we recommend reading the README for more detailed adjustments.

1. How to Use
2. Types
3. Color
4. Custom Color List
5. Section
6. Reversal
7. Height
8. Text
9. Desc
10. Text Background
11. Text Animation
12. Font Color
13. Font Size
14. Font Align - X
15. Font Align - Y
16. Desc Size
17. Desc Align - X
18. Desc Align - Y
19. Rotate
20. Demo

Any of Idea ->Idea-Issue orPR

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

Just write query parameter end of this url. Like this

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

Type data makes to change Background Image.

• wave : default
• egg
• shark
• slice
• rect
• soft
• rounded
• cylinder
• waving
• venom
• speech
• blur
• transparent

Write&type= on the URL

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

Change Background Image!

• &color=auto : Proven random color. List arehere
• &color=timeAuto : Proven random color, but is decided by time.
• &color=random : Really random color. I don't know what colors are showing.
• &color=gradient : Proven random gradient. List arehere
• &color=timeGradient : Proven random gradient, but is decided by time.
• &color=_hexcode : default(#B897FF)
• &color=_custom_gradient : Custom gradient. If write as&color=0:EEFF00,100:a82da8, it will be converted to { 0%: 'EEFF00', 100%: 'a82da8' }. (e.g.DEMO)

If you useauto mode. no need to changefontColor.auto also change fontColor auto.

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

If you use static color. Do not write '#'

When usetimeAuto andtimeGradient?

Used sectionheader andfooter at the same time.

You cancustomize the list of colors that will appear randomly only for&color=auto and&color=gradient.

Write&customColorList= on the URL.

• If you use&color=auto, look atpallete list.
• If you use&color=gradient, look atgradient list.

Pick the color patterns you want and remember theidx value.

For example, if the idx values ​​are 0, 2, and 3, write:&customColorList=0,2,3

If you want to make many apperances ofidx=2, you can write them repeatedly. (e.g.&customColorList=0,2,2,2,2,3)

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

You can use the specified combination usingtheme=.

Even ifcolor andfontColor are used, theme has the highest priority.

Check the list of available themes atpallete_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)

I'm currently adding combinations from theLink:theme little by little.

Section data makes reverse Background Image.

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

Write&section= on the URL

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

Reverse the image left and right. (Color at the same time)

• &reversal=false : (default)
• &reversal=true

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

Change Image Size. Default value is 120.

Write&height= on the URL

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

Do not writepx

Input text over the Image.

Write Something&text=.

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

You can't use some Special Characters. Like '#', '&', '/' ...

It makes confused API

It is recommended to use%20 (blank) and-nl- (new line) only

Input desc over the Image.

Write Something&desc=.

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

You can't use some Special Characters. Like '#', '&', '/' ...

It makes confused API

It is recommended to use%20 (blank) only

Background of Text.

Write&textBg=true to active.

If you want to increase background-size,add%20 between text values.This is because background-size depends on the length of the english-text. (%20 means spacing)

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

Make the text dynamic.

Write&animation=, if you want to use.

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

Change text color. Default value is 000000.

Value should be Hex code with erased '#'

Write&fontColor= behindText query

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

Change text font size. Default value is 70.

Write&fontSize= behindText query

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

Do not writepx

Change text horizontal-align (x). write numberbetween 0~100

&fontAlign= : Default value is 50. center of image

In case there are multiple lines in&text= (-nl-), providing multiple&fontAlign= will apply different horizontal-align to each line individually.

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

Change text vertical-align (y). write numberbetween 0~100

&fontAlignY= : Default value for one line is 50 (center of image). For multiple lines (separated by-nl-), default will be calculated to get lines stacked on top of each other and centered.

In case there are multiple lines in&text= (-nl-), providing multiple&fontAlignY= will apply different vertical-align to each line individually.

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

Change desc font size. Default value is 20.

Write&descSize= behinddesc query

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

Do not writepx

Change desc horizontal-align (x). write numberbetween 0~100

&descAlign= : Default value is 50. center of image

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

Change text vertical-align (y). write numberbetween 0~100

&descAlignY= : Default value is 60. center of image

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

Usage&rotate=, to rotate text.

You can also use negative number.

Recommend number arrange. ☞0 ~ 360,0 ~ -360.

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

Change text stroke.

Write&stroke= behind query

Value should be Hex code with erased '#'

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

Recommended to use withstrokeWidth.

When used alone, strokeWidth defaults to 1.

Change text stroke width.

Write&strokeWidth= behind stroke query

Value must be greater than or equal to 0.

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

Recommended to use withstroke.

When used alone, stroke defaults to 'B897FF'.