Hi Cybrosis,
Thanks for the answer, i tried something similar like this:
<xpath expr="//div[@data-name='predefined_gradients']" position="inside">
<t t-set="aardug_custom_gradient"
t-value="'linear-gradient(190deg, rgb(133, 247, 247) 0%, rgb(32, 197, 213) 100%)'"/>
<button class="w-50" t-attf-style="background-image: #{aardug_custom_gradient};"
t-att-data-color="aardug_custom_gradient"/>
</xpath>
However both don't seem to work, it still shows me the original 8 gradients. It does correctly load in the view, with no errors. Feel like there is something else I'm missing. Any clue?

Hi, Instead of using position inside try replace and add like this:
<div class="o_colorpicker_section" data-name="predefined_gradients">
<t t-set="gradients" t-value="[
'linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%)',
'linear-gradient(135deg, rgb(102, 153, 255) 0%, rgb(255, 51, 102) 100%)',
'linear-gradient(135deg, rgb(47, 128, 237) 0%, rgb(178, 255, 218) 100%)',
'linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%)',
'linear-gradient(135deg, rgb(214, 255, 127) 0%, rgb(0, 179, 204) 100%)',
'linear-gradient(135deg, rgb(255, 222, 69) 0%, rgb(69, 33, 0) 100%)',
'linear-gradient(135deg, rgb(222, 222, 222) 0%, rgb(69, 69, 69) 100%)',
'linear-gradient(135deg, rgb(255, 222, 202) 0%, rgb(202, 115, 69) 100%)',
'linear-gradient(190deg, rgb(133, 247, 247) 0%, rgb(32, 197, 213) 100%)'
]"/>
<t t-foreach="gradients" t-as="gradient">
<button class="w-50" t-attf-style="background-image: #{gradient};" t-att-data-color="gradient"/>
</t>
</div>