CSS Filter Functions
Anonymous contributor
Published Aug 6, 2021Updated Sep 9, 2021
Contribute to Docs
The CSS filter property applies graphical effects like blur to an element. It is commonly used to adjust the rendering of images, backgrounds, and sometimes even borders.
Filter Functions
- blur()
- Defines the blur radius of an element.
- brightness()
- Defines the brightness or darkness of an element.
- contrast()
- Defines the contrast on an element.
- drop-shadow()
- Creates a drop shadow effect behind an element that follows the actual shape of the element.
- grayscale()
- Converts an element to grayscale.
- hue-rotate()
- Accepts an angle value and rotates the hue of an element.
- invert()
- Inverts the colors of an element.
- opacity()
- Controls how much of the background is visible through the element it is applied to.
- saturate()
- Increases or decreases the color intensity of an element.
- sepia()
- Changes the color of an element to sepia.
- url()
- References an external resource such as an image, icon, or other asset provided by the file path or URL.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
- Beginner Friendly.6 hours