lighten the background colour from another class - css

Question

Can we use lighten, Darken CSS attributes without colour value?
I have a class with the background colour
Ex:
.master{
background-color:green;
}
<div class="master">Master</div>
I have to lighten the background of the "Div" using a different CSS class. How can I do that?
Note:
I have a few themes and predefined background colours so I have to use those colours and have a shade of it using a different class
Opacity is not what I'm looking for.

Answer 1

You can consider a pseudo element to create another layer and inherit the background-color then you can apply filter without any issue:
.master{
background-color:green;
}
.master2{
background-color:red;
}
.light,
.dark{
position:relative;
z-index:0;
}
.light:before,
.dark:before{
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-color:inherit;
filter:brightness(200%);
}
.dark:before {
filter:brightness(50%);
}
<div class="master light">Master</div>
<div class="master2 light">Master</div>
<div class="master dark">Master</div>
<div class="master2 dark">Master</div>

Answer 2

You can use the filter CSS property to tweak the brightness as follows:
.master {
background-color: green;
}
.lighten {
filter: brightness(150%);
}
.darken {
filter: brightness(50%);
}
<div class="master">Master</div>
<div class="master lighten">Master lighten</div>
<div class="master darken">Master darken</div>

Answer 3

I think it is quite easy to add a different class so that you can lighten the background of your div element. Try this example,
.master-light{
background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

Answer 4

This might help you, I think this is the only way to achieve your goal.
As you can see both the images were same, no filter is applied to the content.
.master{
color:#fff;
position:absolute;
top:10px;
left:10px;
}
.mmaster{
-webkit-filter: brightness(200%);
background:green;
position:relative;
padding:80px 0;
}
<div class="mmaster"></div>
<div class="master"><img src="https://www.w3schools.com/css/bgdesert.jpg" alt="desert">Desert</div>
<img src="https://www.w3schools.com/css/bgdesert.jpg">