Gradient Color

Develop, Build & Integrate CMS Development
1

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}};

2

Hi @rika1

The second one is the correct way and it should have worked as you see in these screenshots ( ss1, ss2 ). 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!

3

Hey @rika1,

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

{
 "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

{% 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