Community forum for knowledge and support

Updated 3 months ago

Setting gradient stroke button in custom properties

At a glance

A community member, Haja, is asking how to set a gradient stroke button using custom properties. They have tried a method but it doesn't appear in preview mode. Another community member, Emily, suggests nesting a div with a white fill (or other color) inside one with a gradient fill and some padding as the only way to set gradient borders. Haja confirms they have tried this method before and it seems to be the easiest way to do it.

HHaja

Hi Haja here, anyone here knows how to set gradient stroke button in custom properties? I've tried this method but it doesn't seem to appear in preview mode. Appreciate your help.

border-image-source: linear-gradient(to right, var(--base-color-neutral--neutral-lightest), var(--base-color-brand--brand-teal)) 1

2 comments

EEmily Marais

As far as I know the only way to set gradient borders is by nesting a div with white fill (or other colour) inside one with a gradient fill and some padding

HHaja

Thanks Emily! Tried it before. Seems like the easiest way to do it

Add a reply