abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-02 22:58:01 +00:00
Code Issues Projects Releases Wiki Activity
Files
master
til/css/lighten-and-darken-with-css-brightness-filter.md
jbranchaud 862b838a5d Replace codepen embed with image
2017-09-08 15:55:54 -05:00

760 B
Raw Permalink 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%);
}

brighter, regular, and darker spans

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