Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.
We recommend enlisting a professional web developer to work with Code Injection—Readymag support won’t be able to assist with custom code issues.
Gradient background
You can add а gradient background to different widgets in Readymag: Shape, Button, Text. Let’s try it out with a Shape widget:
- Add a new Shape widget.
- Find the ID of your Shape widget, as shown here.
- Open the Code Editor and paste this code into the CSS tab. Don’t forget to replace the fragment
"PASTE WIDGET ID HERE"
with your widget ID from step 2.
[data-id="PASTE WIDGET ID HERE"] {
background: linear-gradient(90deg, #EFC4C4 0%, #94BBE9 100%);
}
4 Publish (or republish) your project: changes won’t be visible in Editor, but will appear in Preview mode and in the published version.
Here’s what the process looks like:
Changeable parameters
linear-gradient
: change it to radial-gradient
in order to make the gradient radiate outward from a certain point. Don’t forget to delete 90deg
(or other deg
attributes) from your code.
90deg
: change it to 45deg
to start the gradient from the bottom left corner or remove it completely to make the gradient start from the top of your shape.
#EFC4C4
: this is the color code. You can easily find the color code you need in the widget’s color palette.
Learn more about the gradient property here.
Gradient for text
Text can also have a gradient, instead of being just a solid color. The main principle is the same, but you need to add parameters that turn your text into a mask. The final code will look like this:
[data-id="PASTE WIDGET ID HERE"] > div {
background: -webkit-linear-gradient(45deg, #EFC4C4 0%, #94BBE9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
And here’s how it appears in the published project:
Gradient for text background
You can add a gradient fill to a text. That’s how it works:
- Add a new text widget.
- Find the ID of your text widget as shown here.
- Add a Code widget and open the CSS tab in it.
- Open the Code Editor and paste this code into the CSS tab. Don’t forget to replace the fragment
"PASTE WIDGET ID HERE"
with your widget’s ID from step 2.
[data-id="PASTE WIDGET ID HERE"] {
background-image: linear-gradient(red, yellow); }
The result: