# Text with a gradient

**URL:** <https://forum.readymag.com/t/text-with-a-gradient/66>\
**Category:** Custom code\
**Created:** [February 25, 2022, 1:36pm UTC](https://forum.readymag.com/t/text-with-a-gradient/66 "2022-02-25T13:36:23Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mary.Readymag](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/mary.readymag/32/27_2.png) [@Mary.Readymag](https://forum.readymag.com/u/Mary.Readymag)\
**Post date:** [February 25, 2022, 1:36pm UTC](https://forum.readymag.com/t/text-with-a-gradient/66/1 "2022-02-25T13:36:23Z")

</div>

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.

```auto
[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](https://help.readymag.com/hc/en-us/articles/4409514751003-Gradient-) in Help.

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