Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
                @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, 2021 at 19:43
                @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, 2021 at 19:49
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.