0

I have a css variable: 

:root{
 --red: hsl(0, 100%, 74%);
}

And then this does not work: 

.page-wrapper{
  background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6)), url(./images/bg-intro-desktop.png);
}               /**** This does not work for some reason****/

If i replace var(--red) with values it works:

.page-wrapper{
  background-image: linear-gradient(hsla(0, 100%, 74%,.6), hsla(0, 100%, 74%,.6)), url(./images/bg-intro-desktop.png);
}   /**** This works well ****/

I was not able to find an answer to this issue, thanks for your help!

Noob
  • 2,247
  • 4
  • 20
  • 31

1 Answers1

1

Mind the syntax. (see https://codepen.io/baadaa/pen/XWJwXaZ )

// DO THIS
:root {
  --red: 0, 100%, 74%;
}
Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20