Here is the code snippet I am working with:
<label
className={classes.trigger}
htmlFor={uniqueId}
ref={labelRef}
style={{ background: val, borderColor: val }}
/>
This is the corresponding CSS:
.trigger {
display: block;
position: relative;
&::before {
content: "";
position: absolute;
height: 40px;
width: 40px;
/* this works*/
// background: inherit;
/*This dosn't*/
background: linear-gradient(90deg, inherit, #00000000);
}
}
I am trying to achieve a fading background color by programmatically setting it.
When I use
background: inherit;
It works fine, but when I try to create a fading effect using a linear gradient, it doesn't work as expected
background: linear-gradient(90deg, inherit, #00000000);
Why does this happen? I have come across information suggesting that browsers treat gradients like images, so I wonder if what I'm attempting is feasible. Is there a workaround for achieving this effect?