How can I dynamically adjust color brightness by percentage in CSS?

Dynamic Color Adjustment with CSS Percentage

Adjusting the brightness or lightness of colors by percentage is a common task in CSS customization and personalization. In modern browsers, this can be achieved effectively using CSS filters.

CSS Color Reduction by Percentage

The provided CSS code snippets attempt to reduce the color brightness by assigning a negative percentage to the color property or the blue color. However, CSS does not support such operations. Instead, CSS filters can be utilized to dynamically modify color brightness.

Adjusting Color Brightness with Filters

The CSS filter property allows you to apply predefined transformations to elements, including color manipulation. To reduce the color by a percentage, you can use the brightness() filter. The following code demonstrates how to darken the color of the "button" element by 15%:

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

In this example, the brightness() filter is applied to the button element on hover. The value of 85% reduces the color's brightness, making it darker. Note that 100% represents the baseline brightness, and values below 100% produce darker colors, while values above 100% produce lighter colors.

By using this method, you can dynamically adjust the color of elements by specifying a percentage, providing you with greater control over color personalization and customization in your web applications.

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