Adding a linear-gradient to a border via :root var in CSS?

Question

How can I add a linear-gradient to a root var in my CSS?

 :root {
--primary: linear-gradient(90deg, rgba(24,238,255,1) 0%, rgba(48,223,255,1) 100%);

}

 border: solid 1px var(--primary);

I'm trying to do something like this, but it isn't working.

why would you need my html when I'm creating a custom root variable. If I put green, it will show, but for linear gradients you need a background, so that's why I'm trying to see how that's possible with a root var — Brian, Jul 04 '20 at 06:23

Always Helping · Answer 1 · 2020-07-04T06:51:10.513

Your gradient values seem to the same color so there is no effect when i tested.

I have added secondary and primary random color to linear gradient for you you can change them as you want.

To apply css via :root to the border you need to use border-image: css property and border-image-slice for the border

I have added border 4px solid for testing purposes and some padding as well.

To read more about using linear gradients on border-image and border-image-slice here is the official MDN reference

Run snippet below to see it working.

:root {
  --primary: 78, 137, 176, 1;
  --secondary: 115, 192, 85, 1;
}

p {
  border: 4px solid;
  border-image: linear-gradient(90deg, rgba(var(--secondary)) 0%, rgba(var(--primary)) 100%);
  border-image-slice: 1;
  padding: 4px;
}

<p>We can take advantage of being able to apply CSS to the and keep our markup clean!</p>

Adding a linear-gradient to a border via :root var in CSS?

1 Answers1