0

I'm using https://theme-ui.com/ to style my components. Everything so far as an experience has been splendid but I simply cannot make gradient values work. I have a button which border on hove should change. I have the following variant defined:

 '&:hover': {
   color: 'lightGraphite',
   borderBottom: '1px solid',
   borderBottomColor: '(linear-gradient(270deg, #FE9A8B 0%, #FD868C 40.85%, #F9748F 73.15%, #F78CA0 100%))'
 }

When I open the application the border has gray color and in the dev tools I see property-invalide-value or something like that.

How can I use gradient values within theme-ui configuration file?

Tek
  • 1,178
  • 1
  • 12
  • 22

1 Answers1

1

If you want to use a gradient as the border color in CSS, see here: Gradient borders

This is what the top answer says:

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink: http://www.webkit.org/blog/1424/css3-gradients/

Browser support: http://caniuse.com/#search=border-image

I don't think it's a theme UI issue here.

Fernando Rojo
  • 2,633
  • 19
  • 17