The CSS filter property applies graphical effects like blurring or color shifting to an element. The hue-rotate() function specifically rotates the hues of the colors in an element around the color wheel, measured in degrees or turns. This allows you to change the entire color scheme of an element without altering the original image file or using complex image editing software.
Example 1: Basic Image Hue Rotation
/* Selects the image with the class 'sunset' */
.sunset {
/* Rotates the hue of the image by 90 degrees */
filter: hue-rotate(90deg);
}
Explanation
This code targets an image and applies a 90deg rotation to its hues. Colors are shifted around the color wheel; for instance, yellows might become greens, and blues could turn into purples, creating a completely different mood for the image.
Example 2: Interactive Button on Hover
/* Styling for a basic button */
.color-shift-button {
background-color: #3498db; /* Initial blue color */
color: white;
padding: 15px;
border: none;
transition: filter 0.4s ease; /* Smooth transition for the filter effect */
}
/* Applies hue-rotate when the mouse is over the button */
.color-shift-button:hover {
filter: hue-rotate(180deg);
}
Explanation
This example demonstrates an interactive effect on a button. When a user hovers over it, the hue-rotate() function shifts the element's colors by 180deg, changing the original blue background to an orange hue, providing clear visual feedback.
Example 3: Using Negative Degree Values
/* Selects the element with the class 'card' */
.card {
background-color: #e74c3c; /* A red color */
/* Applies a negative hue rotation */
filter: hue-rotate(-60deg);
}
Explanation
The hue-rotate() function also accepts negative values. A rotation of -60deg shifts the hue in the opposite direction on the color wheel, which is equivalent to a 300deg positive rotation, transforming the red background into a magenta color.
Example 4: Creating a Pulsing Animation
/* Defines a keyframe animation named 'pulse-color' */
@keyframes pulse-color {
0% {
filter: hue-rotate(0deg); /* Starts with the original color */
}
100% {
filter: hue-rotate(360deg); /* Completes a full circle back to the original color */
}
}
/* Applies the animation to the element */
.animated-orb {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #f06, #09f);
border-radius: 50%;
/* The animation runs infinitely, taking 5 seconds per cycle */
animation: pulse-color 5s infinite linear;
}
Explanation
This code uses CSS animations to create a continuously changing color effect. The hue-rotate() value animates from 0deg to 360deg repeatedly, causing the element to cycle through every possible hue, resulting in a vibrant, eye-catching effect.
Example 5: Combining Multiple Filters
/* Targets an image with the class 'vibrant-nature' */
.vibrant-nature {
/* Applies two filter functions at once */
filter: hue-rotate(45deg) saturate(2);
}
Explanation
You can combine hue-rotate() with other filter functions for more complex effects. In this snippet, the image's hue is first rotated by 45deg, and then its color saturation is doubled, making the new colors appear much more vivid and intense.
Example 6: Using 'turn' Units
/* Selects the text block with the class 'promo-text' */
.promo-text {
background-color: #2ecc71; /* A green color */
/* Rotates the hue by half a turn on the color wheel */
filter: hue-rotate(0.5turn);
}
Explanation
Besides deg, you can use turn as a unit for rotation. One full turn is equivalent to 360deg, so 0.5turn is the same as a 180deg rotation. This code changes the green background to a purple hue.
Example 7: Applying a Filter to a Video
/* Selects a video element */
video {
/* Changes the color scheme of the video content */
filter: hue-rotate(240deg);
width: 100%;
}
Explanation
The filter property is not limited to static elements; it can also be applied directly to media like videos. This CSS applies a 240deg hue rotation to a playing video, shifting all its colors in real-time for a stylized, artistic effect.