CSS Background Gradient

[tkacheva]

Story

As a marketer I want to set background as a gradient color so that these content elements are more engaging for the shoppers

Business Value

gives more advanced visual option to the business user
Adding CSS gradients as an option within Page Builder would give a huge amount of quality and variety to backgrounds for rows and columns in Magento. Especially if possible to combine with the paralax type scroll features.
CSS backgrounds are technically background-image settings, so providing a space where customers can add their own background-image css directly under the background images would be a great option.
If there was an option to create and define the background gradient using a UI, even better. (https://github.com/sharnajh/gradient-generator)

[m2-assistant]

Hi @tkacheva. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[konarshankar07]

@magento I'm working on this

[konarshankar07]

@sidolov
Please share any idea regarding the gradient UI component. I'm thinking like we can create new UI component with two colour pickers and add the custom position like the attached github repo example

[amokato]

We'd like that too. We want to replace as many graphic banners as we can with pure HTML/CSS banners. This would improve load times significantly. Currently we are using a workaround by adding custom css into a HTML block inside our custom banner build with columns and apply the css class to the row/column. For end-users without CSS/HTML knowledge this is quite difficult.

[amokato]

@sidolov Please share any idea regarding the gradient UI component. I'm thinking like we can create new UI component with two colour pickers and add the custom position like the attached github repo example

I would also suggest a radial option as this is more versatile.