Open In App

How to dynamically change color by percentage CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:


Last Updated : 16 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads