# Gradient Color

**URL:** <https://community.hubspot.com/t/gradient-color/110725>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [July 5, 2024, 6:40am UTC](https://community.hubspot.com/t/gradient-color/110725 "2024-07-05T06:40:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rika1](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rika1](https://community.hubspot.com/u/rika1)\
**Post date:** [July 5, 2024, 6:40am UTC](https://community.hubspot.com/t/gradient-color/110725/1 "2024-07-05T06:40:31Z")

</div>

Hello,  
How can i set gradient background color in style field so that this gradient background option will show in customizer that anyone can change gradient color from customizer?? Please help , I tried below codes but they didn’t work.  
background: {{ module.style.gradient.gradient }};  
background: {{ module.style.gradient.css}};

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [July 5, 2024, 8:48am UTC](https://community.hubspot.com/t/gradient-color/110725/2 "2024-07-05T08:48:22Z")

</div>

Hi @rika1

The second one is the correct way and it should have worked as you see in these screenshots ( [ss1](https://prnt.sc/WUeFcB2Gigjy), [ss2](https://prnt.sc/gcMOANT-8sXQ) ). If you can share the code where you are facing this issue, then it can help to figure out the problem.

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [July 5, 2024, 9:02am UTC](https://community.hubspot.com/t/gradient-color/110725/3 "2024-07-05T09:02:13Z")

</div>

Hey @rika1,

make sure that your gradient field in the JSON file(or fields if you’re working with design-manager) looks like this:

```lia-code-sample
{
 "name": "gradient_field",
 "label": "Gradient field",
 "required": false,
 "locked": false,
 "type": "gradient",
 "inline_help_text": "",
 "help_text": "",
 "default":{
 "colors": [
 "color":{
 "r": 255,
 "g": 255,
 "b": 255,
 "a": 1
 },
 "color":{
 "r": 0,
 "g": 0,
 "b": 0,
 "a": 1
 }
 ],
 "side_or_corner": {							 
 "verticalSide": null,								 
 "horizontalSide": "LEFT"
 }
 }
}

```

and

```lia-code-sample
{% require_css %}
 <style>
 {% scope_css %}
 .my_element{
 background: {{ module.style.gradient.css }}
 }
 {% end_scope_css %}
 </style>
{% end_require_css %}

```

in your module.html

Technically it’s not possible to add hubl to the css part and therefore everything you’d like to modify by module style settings has to be inside the {% require\_css %} brackets in the module.html area

best,

Anton