abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-06 08:38:01 +00:00
Code Issues Projects Releases Wiki Activity
Files
3137901d5e57c4b25a002bd6fed01489dd15e136
til/css/lighten-and-darken-with-css-brightness-filter.md

1.1 KiB
Raw Blame History

Lighten And Darken With CSS Brightness Filter

CSS has a filter property that can be used with a variety of filter functions. One of them is the brightness() filter. By feeding a percentage less than 100% to brightness(), the target element will be made darker. Inversely, feeding a percentage greater than 100% to brightness() will make the element brighter.

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

See the Pen OjKJpa by Josh Branchaud (@jbranchaud) on CodePen.

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

See this CSS Tricks Article on the filter property for more details. Check out the browser support story here.