Gradient

Gradient background

You can add а gradient background to different widgets in Readymag: Shape, Button, Text. Let’s try it out with a Shape widget:

1. Add a new Shape widget.
2. Find the ID of your Shape widget, as shown here.
3. 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:

1. Add a new text widget.
2. Find the ID of your text widget as shown here.
3. Add a Code widget and open the CSS tab in it.
4. 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: