CSS darken/brighten color dynamically

If you need to darken or brighten the color of an element by css (e.g. for a hover effect) you can adjust it´s color dynamically with this:

filter: brightness($percentage).

With makeStyles:

filter: "brightness($percentage)"

100% is the base, you can set less (e.g. 97.5%) or more (e.g. 125%).

Thanks to imjared on this answer on stack overflow: https://stackoverflow.com/a/25942447

Let me know if it helped you.

Best,

Frank

Leave a Reply