What are CSS Filters?

CSS Filters allow you to apply graphical effects like blur or color shifting to an element. They are commonly used for images, backgrounds, and borders.

Filters can be used to create visual effects, enhance images, or create unique design elements without the need for external image editing tools.

Supported CSS Filter Properties

• blur()- Applies a Gaussian blur to the element.
• brightness()- Adjusts the brightness of the element.
• contrast()- Adjusts the contrast of the element.
• grayscale()- Converts the element to grayscale.
• hue-rotate()- Applies a hue rotation to the element.
• invert()- Inverts the colors of the element.
• opacity()- Adjusts the opacity of the element.
• saturate()- Saturates or desaturates the element.
• sepia()- Converts the element to sepia.

How to Apply Filters

Using the CSS code generated by this tool, you can apply filters to any HTML element. Here's how:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Browser Compatibility

CSS filters are widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, older browsers like Internet Explorer do not support them.