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.

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

E
H
2 comments

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

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

Add a reply
Sign up and join the conversation on Slack