# How do I add a gradient fill to a shape? I only see results for adding a gradient background to shape

**URL:** <https://forum.readymag.com/t/how-do-i-add-a-gradient-fill-to-a-shape-i-only-see-results-for-adding-a-gradient-background-to-shape/636>\
**Category:** Custom code\
**Created:** [September 2, 2022, 10:38am UTC](https://forum.readymag.com/t/how-do-i-add-a-gradient-fill-to-a-shape-i-only-see-results-for-adding-a-gradient-background-to-shape/636 "2022-09-02T10:38:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![EMERGEiQ](https://avatars.discourse-cdn.com/v4/letter/e/9fc29f/32.png) [@EMERGEiQ](https://forum.readymag.com/u/EMERGEiQ)\
**Post date:** [September 2, 2022, 10:38am UTC](https://forum.readymag.com/t/how-do-i-add-a-gradient-fill-to-a-shape-i-only-see-results-for-adding-a-gradient-background-to-shape/636/1 "2022-09-02T10:38:28Z")

</div>

This is the only result I find: [https://help.readymag.com/hc/en-us/articles/4409514751003-Gradient-](https://help.readymag.com/hc/en-us/articles/4409514751003-Gradient-)

However, I want the actual shape to have a gradient, how do I do that?

---

<div class="post-metadata">

**Author:** ![Hi\_Rez](https://avatars.discourse-cdn.com/v4/letter/h/e56c9b/32.png) [@Hi\_Rez](https://forum.readymag.com/u/Hi_Rez)\
**Post date:** [August 7, 2023, 3:54pm UTC](https://forum.readymag.com/t/how-do-i-add-a-gradient-fill-to-a-shape-i-only-see-results-for-adding-a-gradient-background-to-shape/636/2 "2023-08-07T15:54:28Z")

</div>

Hi. Did you ever find a solution for this? I’m trying to do the same thing

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [August 21, 2023, 9:12am UTC](https://forum.readymag.com/t/how-do-i-add-a-gradient-fill-to-a-shape-i-only-see-results-for-adding-a-gradient-background-to-shape/636/3 "2023-08-21T09:12:25Z")

</div>

I think the easiest way would be to build the shape in a graphic program of your choice and export as png with transpareny.

For sure you can also add the gradient with css. With the help of the browser dev-tools-inspect you can get the right element and its data-id and change the color/background-color/etc in the css tab of the customcode panel.