Text with a gradient

Apart from being used as a background, a gradient fill can also be applied to text. Doing it takes literally a minute—use this CSS code with the id of your text widget.

[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;


Don’t forget that gradients’ colors, modes and axes are all modifiable—moreover, they can be altered on hover. To learn more tricks with gradients, see this article in Help.

Do you have any exciting work with gradients under your belt?