Root

Root component - Abyssale REST API

As mentioned before, the root element can be used to customise the background of your image.
Property
Description
background_color
2 filling modes are available:
Monochrome:  String: 6-8digits hexadecimal color 
​Go to Monochrome Color documentation​
Linear gradient
Go to Linear Gradient documentation​
Monochrome Color
Monochrome supported formats are:
6 hexadecimal digits with a starting #: 
Specified with: #RRGGBB. RR (red), GG (green) and BB (blue)
Example: #0000FF
8 hexadecimal digits with a starting #: 
This format is an extended version of the 6 hexa digits, allowing to define an opacity to the color.
Specified with: #RRGGBBAA. RR (red), GG (green), BB (blue) and AA (alpha)
Example: #0000FF80 represents the blue color with a 50% opacity (80).
Here is the representation list of opacity (in percentage) to hexadecimal: (you can also find all values in this codepen)
Opacity (on a scale to 0-100)
AA (Alpha Hexadecimal)
0
00
5
0D
10
1A
20
33
30
4D
40
66
50
80
60
99
70
B3
80
CC
90
E6
100
FF
3 hexadecimal colors are not supported (such as#AAA)
Linear gradient
A linear gradient property can be used as background_color (banner background, button) & color (text).
The linear gradient format is represented as:
linear-gradient(x1% y1% x2% y2%,offset_color1% hexa_color1 opacity_color1,offset_color2% hexa_color2 opacity_color2)
Gradient properties
Description
x1, y1, x2, y2
Number (Percentage), can be negative. Define the straight line that will be used to draw the background.
offset_color1, offset_color2
Number (Percentage), can be negative. Define the offset of the starting & ending points (default: 0%, 100%)
hexa_color1, hexa_color2
String: 6 digits hexa color. Starting & ending colors
opacity_color1, opacity_color2
Float (between 0 & 1). Opacity of starting & ending colors
Examples:
Monochrome:
​
"background_color": "#610000"
​
​
Linear gradient (horizontal):

"background_color": "linear-gradient(0% 0% 100% 0%,0% #1a47ff 1,100% #b65151 1)"
​
​
Linear gradient (vertical):

"background_color": "linear-gradient(0% 0% 0% 100%,0% #1a47ff 1,100% #b65151 1)"
​
​
Linear gradient (diagonal):

"background_color": "linear-gradient(0% 0% 100% 100%,0% #1a47ff 1,100% #b65151 1)"
​
​

Property	Description
background_color	2 filling modes are available: `Monochrome`: String: 6-8digits hexadecimal color Go to Monochrome Color documentation `Linear gradient`Go to Linear Gradient documentation

Opacity (on a scale to 0-100)	AA (Alpha Hexadecimal)
0	`00`
5	`0D`
10	`1A`
20	`33`
30	`4D`
40	`66`
50	`80`
60	`99`
70	`B3`
80	`CC`
90	`E6`
100	`FF`

Gradient properties	Description
`x1, y1, x2, y2`	Number (Percentage), can be negative. Define the straight line that will be used to draw the background.
`offset_color1`, `offset_color2`	Number (Percentage), can be negative. Define the offset of the starting & ending points (default: 0%, 100%)
`hexa_color1`, `hexa_color2`	String: 6 digits hexa color. Starting & ending colors
`opacity_color1`, `opacity_color2`	Float (between 0 & 1). Opacity of starting & ending colors

Element properties

Text

Last modified 11mo ago

Monochrome: `"background_color": "#610000"`
Linear gradient (horizontal): `"background_color": "linear-gradient(0% 0% 100% 0%,0% #1a47ff 1,100% #b65151 1)"`
Linear gradient (vertical): `"background_color": "linear-gradient(0% 0% 0% 100%,0% #1a47ff 1,100% #b65151 1)"`
Linear gradient (diagonal): `"background_color": "linear-gradient(0% 0% 100% 100%,0% #1a47ff 1,100% #b65151 1)"`