Decorate GitHub Profile or any Repo like me!
- How to Use
- Types
- Color
- Section
- Reversal
- Height
- Text
- Desc
- Text Background
- Text Animation
- Font Color
- Font Size
- Font Align - X
- Font Align - Y
- Desc Size
- Desc Align - X
- Desc Align - Y
- Rotate
- Demo
Any of Idea -> Idea-Issue or PR
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§ion=header&text=capsule%20render&fontSize=90)
HTML:
<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90" />
Type data makes to change Background Image.
Write &type=
on the URL
![header](https://capsule-render.vercel.app/api?type=slice)
Change Background Image!
&color=auto
: Proven random color. List are here&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 are here&color=timeGradient
: Proven random gradient, but is decided by time.&color=_hexcode
: default(#B897FF)
If you use auto
mode. no need to change fontColor
.
auto
also change fontColor auto.
![header](https://capsule-render.vercel.app/api?color=auto)
If you use static color. Do not write '#'
When use
timeAuto
andtimeGradient
?Used section
header
andfooter
at the same time.
Section data makes reverse Background Image.
§ion=header
: (default)§ion=footer
Write §ion=
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 200.
Write &height=
on the URL
![header](https://capsule-render.vercel.app/api?height=400)
Do not write
px
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) 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.2sscaleIn
: scaleIn .8sblink
: blink .6sblinking
: blinking 1.6stwinkling
: 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=
behind Text query
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)
Change text font size. Default value is 70.
Write &fontSize=
behind Text query
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)
Do not write
px
Change text horizontal-align (x). write number between 0~100
&fontAlign=
: Default value is 50. center of image
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70)
Change text vertical-align (y). write number between 0~100
&fontAlignY=
: Default value is 50. center of image
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)
Change desc font size. Default value is 20.
Write &descSize=
behind desc query
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)
Do not write
px
Change desc horizontal-align (x). write number between 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 number between 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)