CSS Class to Lighten Background Color

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

---

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

lighten the background colour from another class

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>

Lighten RGB with pure CSS

This isn't possible.

However

Lightening colors is very easy with hsl so if you store the hsl color along with the RGB like this:

:root {
  --redColor: 142,  49,  42;
  --redColor_h: 4;
  --redColor_s: 54%;
  --redColor_l: 36%;
}

Then you can lighten the color with this SASS mixin:

@function lighten($shadeCode, $amount) {
  @return hsl(var(--#{$shadeCode}_h), var(--#{$shadeCode}_s), calc(#{var(--#{$shadeCode}_l)} + #{$amount}));
}

And use it like this:

background-color: lighten('redColor', 25%);

And boom you got lighter colors.

Css Background Color Opacity

You could use an rgba colour for the background. rgba has an alpha channel that dictates the opacity of the colour layer. This would be the equivalent of the background-color-opacity that you mention.

div {  padding: 15px;  text-align: center;}div:nth-child(1) {  background: red;}
div:nth-child(2) {  background: green;}
div:nth-child(3) {  background: blue;}
button {  background: transparent;  border: 1px solid white;  color: white;  padding: 15px 30px;  transition: all .2s ease;}
button:hover {  background: rgba(0,0,0,0.3);}

<div>  <button type="button">    Button  </button></div>
<div>  <button type="button">    Button  </button></div>
<div>  <button type="button">    Button  </button></div>

---

Related Topics