css - lighten the background colour from another class

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:

1. 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

2. Opacity is not what I'm looking for.

Answer 1

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">