# Gradient in a Module Style Field

**URL:** <https://community.hubspot.com/t/gradient-in-a-module-style-field/46855>\
**Category:** CMS Development\
**Created:** [November 11, 2021, 8:02pm UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855 "2021-11-11T20:02:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![LSeth](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lseth/32/48165_2.png) [@LSeth](https://community.hubspot.com/u/LSeth)\
**Post date:** [November 11, 2021, 8:02pm UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855/1 "2021-11-11T20:02:50Z")

</div>

I was wondering if you can use a gradient picker in a module’s style field? I was able to add this to the module’s field.json to add it to the module:

{  
“name”: “bg\_gradient”,  
“label”: “Background gradient”,  
“helptext”: “Sets a gradient behind the content”,  
“required”: false,  
“type”: “gradient”,  
“default”: {  
“colors”: [{  
“color”: {  
“r”: 29,  
“g”: 114,  
“b”: 170,  
“a”: 1  
}  
}, {  
“color”: {  
“r”: 57,  
“g”: 67,  
“b”: 151,  
“a”: 1  
}  
}],  
“side\_or\_corner”: {  
“verticalSide”: “BOTTOM”,  
“horizontalSide”: null  
}  
}  
}

The issue is that the output from Hubl is:

{colors=[{color={r=153, g=1, b=0, a=1}}, {color={r=120, g=63, b=4, a=1}}], side\_or\_corner={verticalSide=BOTTOM, horizontalSide=null}, css=linear-gradient(to bottom, rgba(153, 1, 0, 1), rgba(120, 63, 4, 1))}

I was wondering how this can be used in the css to give a background the gradient styles? Thanks.

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [November 12, 2021, 8:03am UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855/2 "2021-11-12T08:03:04Z")

</div>

Hi @LSeth , thank you for your post.

I wanted to tag in our top contributors here- @Indra and @Oezcan , would you be able to share your advice for Seth?

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [November 12, 2021, 9:29am UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855/3 "2021-11-12T09:29:40Z")

</div>

Hi @LSeth,

This is possible.

So your json file is:

```lia-code-sample
{
 "name": "bg_gradient",
 "label": "Background gradient",
 "helptext": "Sets a gradient behind the content",
 "required": false,
 "type": "gradient",
 "default": {
 "colors": [
 {
 "color": {
 "r": 29,
 "g": 114,
 "b": 170,
 "a": 1
 }
 },
 {
 "color": {
 "r": 57,
 "g": 67,
 "b": 151,
 "a": 1
 }
 }
 ],
 "side_or_corner": {
 "verticalSide": "BOTTOM",
 "horizontalSide": null
 }
 }
}

```

To use the element from the fields.json inside your custom theme, you can get the values with this hubl:

`{{ theme.[your_fields] }}`

For all field options, I recommend checking out the documentation about [Module and Theme Field Types](https://developers.hubspot.com/en/docs/cms/building-blocks/module-theme-fields). There is a code example for gradient at [Generated CSS](https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields-overview#generated-css).

It’s good to look at the [HubSpot CMS Boilerplate](https://developers.hubspot.com/docs/cms/building-blocks/themes/hubspot-cms-boilerplate) how a theme is setup.

In your case, it you have a CSS file, you can output your code something like this:

```lia-code-sample
.gradient{
 {% if theme.gradient_bg.css %}
 background: {{ theme.gradient_bg.css }};
 {% endif %}
}

```

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 12, 2021, 1:16pm UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855/4 "2021-11-12T13:16:07Z")

</div>

Hi @LSeth ,  
I not sure about this way but I have alternative way to add gradient color option in module  
You can create two color fields in module and use it in inline css where you want to give gradient color.  
like this -  
style=“background: linear-gradient(to bottom, {{color.color1}} 0%, {{color.color2}} 100%)”

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 12, 2021, 1:19pm UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855/5 "2021-11-12T13:19:28Z")

</div>

@LSeth , Or You can try this also:  
please use this code to create engagment with PHP : public function createActivityhubspot()  
$curl = curl\_init();  
curl\_setopt\_array($curl, array(  
CURLOPT\_URL =\> ‘[https://api.hubapi.com/engagements/v1/engagements](https://api.hubapi.com/engagements/v1/engagements)’,  
CURLOPT\_RETURNTRANSFER =\> true,  
CURLOPT\_ENCODING =\> ‘’,  
CURLOPT\_MAXREDIRS =\> 10,  
CURLOPT\_TIMEOUT =\> 0,  
CURLOPT\_FOLLOWLOCATION =\> true,  
CURLOPT\_HTTP\_VERSION =\> CURL\_HTTP\_VERSION\_1\_1,  
CURLOPT\_CUSTOMREQUEST =\> ‘POST’,  
CURLOPT\_POSTFIELDS =\>‘{  
“engagement”: {  
“active”: true,  
“ownerId”: 1,  
“type”: “CALL”,  
“timestamp”:’.$time.’  
},  
“associations”: {  
“contactIds”: [  
“‘.$contacteID.’”  
]  
},  
“attachments”: [  
{  
“id”: 0  
}  
],  
“metadata”:{  
“toNumber”:‘.$tophone.’,  
“fromNumber”:‘.$fromphone.’,  
“durationMilliseconds”: ‘.$CallDurationa.’,  
“title” : “Call Test”,  
“body” : “Testing twillo”,  
“disposition” : “‘.$despoID.’”,  
“recordingUrl”:“‘.$RecordingUrl.’”  
}  
}',  
CURLOPT\_HTTPHEADER =\> array(  
‘Content-Type: application/json’,  
'authorization: Bearer '.$token  
),  
));  
$response = curl\_exec($curl);  
} Make sure need to use your variables and choose type what ever you want as i was creating call engament so i choose type call. [Screenshot by Lightshot](https://prnt.sc/1z9i0qv) screenshot attached , API Doc : [https://legacydocs.hubspot.com/docs/methods/engagements/create\_engagement](https://legacydocs.hubspot.com/docs/methods/engagements/create_engagement)

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\
**Post date:** [November 12, 2021, 6:07pm UTC](https://community.hubspot.com/t/gradient-in-a-module-style-field/46855/6 "2021-11-12T18:07:30Z")

</div>

Hey @natsumimori, thanks for linking 🙂  
And Hello @LSeth,  
I hope you could solve your [last](https://community.hubspot.com/t5/CMS-Development/Override-Button-Styles-in-Global-Partial-Template/m-p/524335#M26079) matter, I would be happy if you would give feedback on it.  
Back to the current matter.  
As @Indra said, this is possible.

Perhaps, you have already noticed these two points on this [point]([http://Perhaps](http://Perhaps),%20you have already noticed these two points on this point: Gradient fields are supported in modules. Gradient fields can only be used as style fields.):

 ![Oezcan_0-1636737110994.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/f/5feb7315b3e43bb71bb5db0f3e73e1b52c4d550a.png)

and perhaps this point in [this documentation]([http://Just](http://Just)%20like this point in this documentation):

![Oezcan_1-1636737314466.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/5/f5ce1dbad897c5e616182fa6fd8374aa853283f2.png)

To use it in the style field, use the code suggested here in the top lines of your module.

```lia-code-sample
{% require_css %}
<style>
{% scope_css %}
 .your-class {
 {% if module.styles.gradient.css %}
 background: {{ module.styles.gradient.css }};
 {% endif %}
 }
{% end_scope_css %}
</style>
{% end_require_css %}

```

In addition to the boilerplate, I would also recommend looking into the new growth theme. There are many of these functions in the Modules at the Design Tools.

 ![Oezcan_3-1636739296146.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/0/10bc1994d654c18f325935ecde3b82b086c203e5.jpeg)

Perhaps you can save yourself some work if you first create the style in the modules in design tools and copy the json so that you can use it locally.

Last but not least, [here](https://www.w3schools.com/css/css3_gradients.asp) are a few more inspirations. Feel free and maybe use more than two colors in your json/module 🙂

Best regards and have some fun with gradients  
Özcan