# fields.json: Gradient side\_or\_corner not working

**URL:** <https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725>\
**Category:** CMS Development\
**Created:** [August 31, 2023, 3:02pm UTC](https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725 "2023-08-31T15:02:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![KospeKaspa](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@KospeKaspa](https://community.hubspot.com/u/KospeKaspa)\
**Post date:** [August 31, 2023, 3:02pm UTC](https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725/1 "2023-08-31T15:02:48Z")

</div>

Hello,

I defined this in fields.json of a module:

`{ "label": "Gradient", "name": "gradient", "type": "gradient", "locked" : false, "default": { "colors": [{ "color": { "r": 182, "g": 6, "b": 0, "a": 1 } }, { "color": { "r": 232, "g": 17, "b": 21, "a": 1 } }], "side_or_corner": { "verticalSide": null, "horizontalSide": "RIGHT" } }`

and in my theme-overrides.css is added:

`background: theme.header.background.gradient.css`

but when i see the preview page, appears this:  
**background: linear-gradient(\<!-- invalid side or corner --\>, rgba(99, 99, 99, 1), rgba(232, 17, 21, 1));**

**}**

What is wrong? I tried with the side\_or\_corner that appears [here](https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields#gradient) but the result was the same. I follow the instructions of the [post](https://community.hubspot.com/t5/CMS-Development/Gradient-in-a-Module-Style-Field/m-p/524959#M26095) but nothing.  
What am i missing? Also, where can i find the documentation/specification about the side\_or\_corner?

Thank you

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [September 1, 2023, 7:59pm UTC](https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725/2 "2023-09-01T19:59:36Z")

</div>

Hey, @KospeKaspa 👋 I hope you got this resolved. If not, can you try adjusting your `side_or_corner` code a bit? Example:

```lia-code-sample
"side_or_corner": {
 "verticalSide": "BOTTOM",
 "horizontalSide": "RIGHT"
}

```

Have fun building! — Jaycee

---

<div class="post-metadata">

**Author:** ![KospeKaspa](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@KospeKaspa](https://community.hubspot.com/u/KospeKaspa)\
**Post date:** [September 4, 2023, 11:49am UTC](https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725/3 "2023-09-04T11:49:43Z")

</div>

Hello, unfortunally it did not work. Still gives:

 ![KospeKaspa_0-1693828144164.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/e/1e0d8d3f3e0c4f4ca76b5cd10050db252c00e8de.png)

Where i can read documentation to solve this problem? Thank you.

---

<div class="post-metadata">

**Author:** ![KospeKaspa](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@KospeKaspa](https://community.hubspot.com/u/KospeKaspa)\
**Post date:** [September 4, 2023, 11:55am UTC](https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725/4 "2023-09-04T11:55:30Z")

</div>

Just in case, this is how i use the gradient in _theme-overrides.css:_\*\*

`{% set header_bg_gradient = theme.header.background.gradient.css %}`

`.header { background-color: {{ header_bg_color }}; height: {{theme.header.height}}px; background: {{header_bg_gradient}};}`

But i guess this is correct because in the final css code, it appears the correct invocation of the gradient (only the **side-or-corner** give the error).

---

<div class="post-metadata">

**Author:** ![KospeKaspa](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@KospeKaspa](https://community.hubspot.com/u/KospeKaspa)\
**Post date:** [September 7, 2023, 2:51pm UTC](https://community.hubspot.com/t/fields-json-gradient-side-or-corner-not-working/88725/5 "2023-09-07T14:51:42Z")

</div>

The **side\_or\_corner** did not work in the theme fields.json but it works in the modules fields.json. Also i used the css/theme-overrides.css to implement the gradient.