Skip to content
Related Articles

Related Articles

How to dynamically change color by percentage CSS ?
  • Last Updated : 16 Apr, 2021

In this article, we will learn How to dynamically change color by percentage CSS.

Approach: We can dynamically change the color of any element by percentage using the filter property in CSS. The brightness() function of the filter property is used to dynamically change color by percentage. The brightness function takes a value in percentage to set the brightness of that color.

Syntax:

filter: brightness(value);

Example: In the below example we set the background color of the element white. But when we hover on the paragraph its background color changes 50% because we set a filter that changes the background color of the paragraph by 50%.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .gfg{
            font-size: 40px;
            color: green;
            border: solid 2px red ;
            background-color: white;
        }
        p:hover{
            /* Change brightness */
            filter: brightness(50%);
        }
    </style>
</head>
<body>
    <p class="gfg">GeeksforGeeks</p>
  
</body>
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :