How can I dynamically adjust the brightness of a color using CSS?

Dynamic Color Manipulation with CSS Filters

Question:

How can we dynamically lighten or darken a specified color using CSS? Can we reduce a color by a percentage?

Answer:

Yes, reducing a color by a percentage is possible using CSS filters. Here's how:

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

In this example, the base color is set as red (#ff0000) for the button. By applying a filter to the button on hover, the brightness is reduced by 15%, resulting in a darker shade of red. Percentages can be adjusted to achieve desired levels of lightness or darkness.

This approach is compatible with all modern browsers, as evident from its widespread availability in the caniuse compatibility table.

The above is the detailed content of How can I dynamically adjust the brightness of a color using CSS?. For more information, please follow other related articles on the PHP Chinese website!