How to Add Gradient Color Selection to the OOTB Colour Picker in AEM Cloud

Forum|Forum|11 months ago
February 17, 2025
2 replies
662 views

How to Add Gradient Color Selection to the OOTB Color Picker in AEM Cloud

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by arunpatidar

You can't use gradients directly with the OOTB color picker because gradients are not colors but a CSS property.
For example:

background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(246,253,29,0.6097032563025211) 42%, rgba(148,171,249,0.8085828081232493) 85%);

If you have predefined gradients, you can allow authors to select from a predefined list. Alternatively, you can use an external tool like CSS Gradient to generate a gradient and store it in a text field.

arunpatidar

Accepted solution

Community Advisor

Hi @nilesh_mali

You can't use gradients directly with the OOTB color picker because gradients are not colors but a CSS property.
For example:

background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(246,253,29,0.6097032563025211) 42%, rgba(148,171,249,0.8085828081232493) 85%);

If you have predefined gradients, you can allow authors to select from a predefined list. Alternatively, you can use an external tool like CSS Gradient to generate a gradient and store it in a text field.

Arun Patidar