CSS huerotate() Function (original) (raw)

CSS hue-rotate() Function

Last Updated : 7 Jun, 2023

The hue-rotate() function is an inbuilt function which is used to apply a filter to the image to set the hue rotation of the image.

Syntax:

hue-rotate( angle )

Parameters: This function accepts single parameter angle which holds the angle of hue-rotation. A positive hue angle increases the hue value, while a negative angle decreases the hue value.

Below example illustrates the hue-rotate() function in CSS:

Example:

html `

CSS hue-rotate() Function 
<style>
    h1 {
        color:green;
    }
    body {
        text-align:center;
    }
    .hue_rotate_effect {
        filter: hue-rotate(100deg);
    }
</style>

GeeksforGeeks

<h2>CSS hue-rotate() function</h2>

<img class="hue_rotate_effect" src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo">

`

Output:

Supported Browsers: The browsers supported by hue-rotate() function are listed below: