How to Add Gradient Color Selection to the OOTB Colour Picker in AEM Cloud | Community
Skip to main content
Nilesh_Mali
Nilesh_Mali
New Participant
February 17, 2025
Solved

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

  • February 17, 2025
  • 2 replies
  • 658 views

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

Best answer by arunpatidar

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.

2 replies

A
Anil_Chennapragada
New Participant
February 17, 2025

Hello,

Hope your have already found the solution for this. If not please see if this helps

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-there-a-way-to-have-grandient-color-styles-color-picker-in/m-p/556467

 

Thanks,

Anil

    arunpatidar
    arunpatidarAccepted solution
    New Participant
    February 17, 2025

    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
      Terms & ConditionsAccessibility statement

      Loading footer...