Applying Grayscale, Sepia, and Hue-Rotate Filters to an Element with CSS
This set of CSS code applies three filters to the element with the class “vintage”. The first filter, grayscale(1), removes all color from the element and displays it in black and white. The second filter, sepia(1), gives the element a brownish-grey tint, giving it a vintage or old-fashioned appearance. The third filter, hue-rotate(35deg), changes the overall color of the element by rotating its hue by 35 degrees. These filters are applied in the order they are listed, so the element is first converted to grayscale, then given a sepia tint, and then has its hue rotated. This can create a combination of these effects on the element.
.vintage {
filter: grayscale(1) sepia(1) hue-rotate(35deg);
}
<img src="trophy.jpg" class="vintage" /> <img src="trophy.jpg"/>
Targeting Multiple Elements with CSS Filters
It’s worth noting that these filters will only be applied to the element with the class “vintage”. If you want to apply these filters to multiple elements, you’ll need to use a class selector or some other method for targeting multiple elements.
Browser Support for CSS Filters
The CSS filters (grayscale, sepia, and hue-rotate) are widely supported in modern web browsers. According to CanIUse, all major desktop and mobile browsers support these filters, including Internet Explorer, Edge, Chrome, Firefox, Safari, and Opera. However, it’s worth noting that some older or less widely used browsers may not support these filters.
Testing Your Code in Different Browsers
It’s always a good idea to test your code in a variety of browsers to ensure that it works as intended across different platforms. You can use a tool like CanIUse to check the level of browser support for different CSS features and plan your code accordingly.
