1

I have the following markup:

  <label
    className={classes.trigger}
    htmlFor={uniqueId}
    ref={labelRef}
    style={{ background: val, borderColor: val }}
  />

The css is as followed:

.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 want to have a background color that fades away, I'm setting the background color programmatically.

When i simply say

background: inherit;

It works perfectly, But when i want to make it look like it's fading using a linear-gradient it's not working anymore

background: linear-gradient(90deg, inherit, #00000000);

Why is that? I read around that the browser treats gradients like an image (or something in that ball park), So is this even possible to do the way I'm going about it? Or is there some trick to achive this?

TheNormalPerson
  • 551
  • 5
  • 15
  • did you consider CSS variables? – Temani Afif Jun 29 '21 at 19:35
  • @TemaniAfif Oh that's an idea, you mean define one programmatically, and use it in the css? That could work.... Although The amount of items I'll have is dynamic, so i don't know how many css variables I'll need, and i don't know if it's a good idea to define one for each item... – TheNormalPerson Jun 29 '21 at 19:43
  • 1
    check this answer: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Jun 29 '21 at 19:44
  • @TemaniAfif Thanks! That did the trick! I though variables could only be defined in the root element... The fact you can define them on every element is a game changer, Thank you – TheNormalPerson Jun 29 '21 at 19:49

1 Answers1

1

As commented, simply use CSS variables:

.trigger {
  display: block;
  position: relative;
}

.trigger::before {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: linear-gradient(90deg, var(--c), #00000000);
}
<label class=trigger style="--c:red;" >some text </label>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415