abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-06 00:28:01 +00:00
Code Issues Projects Releases Wiki Activity
Files
ba12f9d5be915804dd3e9253a3eed44f5165942e
til/css/lighten-and-darken-with-css-brightness-filter.md
jbranchaud ba12f9d5be Remove the unnecessary p tag with author info
2017-09-08 15:39:26 -05:00

774 B
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%);
}
<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.