--- title: "Everything You Need to Know about All 11 CSS Filters | CoderPad" description: "Learn more about Everything You Need to Know about All 11 CSS Filters from CoderPad." canonical: "https://coderpad.io/blog/development/everything-you-need-to-know-about-all-11-css-filters/" last_modified: "2023-06-05 14:24:01" --- [Back to blog](https://coderpad.io/blog/) # Everything You Need to Know about All 11 CSS Filters July 7, 2022 12 Minute Read By Victor Ikechukwu [Development](https://coderpad.io/blog/development/) CSS, the language for visually styling elements on the web, has evolved to include features that can change an element’s visual effects in a website’s source code – freeing you from the need for graphical and photo editing software. Enter CSS filters. CSS filters allow developers to alter an HTML element (usually an image) appearance before it gets displayed in the browser. It provides various operations that can be performed on an element to change its visual properties — for example, increasing the brightness of an image, enhancing an element’s color intensity, adding a blur effect, and much more. There are 11 filters in CSS, which are: - [blur](#blur) - [brightness](#brightness) - [contrast](#contrast) - [grayscale](#grayscale) - [hue-rotate](#hue-rotate) - [invert](#invert) - [opacity](#opacity) - [saturate](#saturate) - [sepia](#sepia) - [drop-shadow](#drop-shadow) - [url](#url) This guide will walk you through each CSS filter, what they are, how they work, and how you can use them in your code. ## Learn how to run front-end developer interviews that don’t suck [Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/) ## How Do CSS Filters Work? We can apply CSS filters to an element by declaring the CSS filter property within the element’s style block, passing one or more of the 11 CSS filters as its value. Syntax: ``` element { filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); }Code language: CSS (css) ``` Notice that each filter has an opening and closing parenthesis after its name. That is because each filter is a CSS function that accepts either a length, percentage, or degree value, signifying how much of the filter should be applied to an element. Now, let’s look at how each CSS filter works in detail. ## blur ``` .blurry { filter: blur( ); }Code language: CSS (css) ``` The CSS blur filter applies a [Gaussian blur](https://en.m.wikipedia.org/wiki/Gaussian_blur) visual effect to an element. It accepts a [CSS length unit](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths) (px, rem, em, etc.) to determine how many pixels on the screen need to blend into each other to generate a blurred result. The larger the value of the CSS length unit passed to the filter, the more blur is applied to the element. If we do not provide a value, a default value of 0 is used. For the blur filter (and all CSS filters covered in this article) we’ll use the image below to demonstrate each filter’s effect on an element. Photo by [Fox from Pexels](https://www.pexels.com/photo/three-men-watching-camera-holding-by-a-woman-1615810/) The code below adds a blur effect of 3px to the image: ``` img { filter: blur(3px); }Code language: CSS (css) ``` Here is the result: ## brightness ``` .exposed { filter: brightness( | ); }Code language: CSS (css) ``` The brightness filter adjusts the brightness level of an image. The filter applies a linear multiplier to the input image, making it appear brighter or darker. It accepts a decimal value between 0 and 1, or a percentage value. A value of 0 results in a completely black image. A value of 100% or 1 leaves the image as is with its original brightness level. Values greater or less than 100% or 1 determine how dark or bright the image will be. Note that all filter functions that accept decimal values do not work with negative integers (-10, for example) but only accept positive numbers. The brightness filter has a default percentage and numerical value of 100% and 1. Passing a percentage or numerical value lower than these numbers reduces the image brightness level, giving it the appearance of having a shadow cast over it. The lower the value the higher the intensity of the shadow cast over it is. The code below applies the brightness filter with a percentage value of 35% to an image: ``` img { filter: brightness(35%); }Code language: CSS (css) ``` The result: The opposite effect occurs when you pass a percentage or numerical value greater than 100% and 1 to the filter function. It increases the image’s brightness level to make it appear like a photo that has been over-exposed to too much light. The code below applies the brightness filter with a value of 135% to an image. ``` img { filter: brightness(135%); }Code language: CSS (css) ``` The result: ## contrast ``` .sharpen { filter: contrast( | ); }Code language: CSS (css) ``` The contrast filter adjusts the brightness difference between the darkest and lightest parts of an image, giving the image a more or less enhanced look. It accepts a percentage or decimal value to determine the contrast level of an image — a value of 0 results in a completely gray image. Values above 100% and 1 increase the contrast, and parameters below decrease the contrast of the image. The code below adds a contrast level of 180% to an image: ``` img { filter: contrast(180%); }Code language: CSS (css) ``` The result: ## grayscale ``` .black-and-white { filter: grayscale( | ) }Code language: CSS (css) ``` In digital photography, an image contains both color information and luminance (brightness) information. The grayscale filter removes all color information (a representation of the three light sources — red, green, and blue (RGB) used to produce colors on a computer screen) from an image. It leaves only the luminance information — a range of monochromic (gray) shades, with pure white as the lightest shade, pure black as the darkest shade, and every other shade in between being a shade of gray — known as the grayscale. [An illustration of the grayscale color range](https://calcolor.co/palette/942409461) The grayscale filter removes all color information from an image and sets its color to a tone in the grayscale. It accepts a decimal value between 0 and 1, or a percentage value up to 100%. A value of 100% or 1 results in a completely gray image. The image would remain unchanged with a value of 0% or 0, and values between 0% and 100% give it a tone between its original color and complete gray, making the image have a desaturated look. The code below uses the grayscale filter to make an image completely gray: ``` img { filter: grayscale(100%); }Code language: CSS (css) ``` The result: Typical applications where the grayscale filter could come into use would be [applying it to images when dark mode is enabled](https://medium.com/dev-channel/re-colorization-for-dark-mode-19e2e17b584b) to slightly reduce the overall vibrancy of colors, putting less eye strain on the user. You might also use it to [make client logos gray](https://coderpad.io/customers/) when listing them on a website. ## hue-rotate ``` .change-color { filter: hue-rotate( | ); }Code language: CSS (css) ``` Digital photography uses a concept known as the color wheel, an organization of colors around a circle, showing the relationships between the primary, secondary, and tertiary colors to produce colors on a computer screen. [An illustration of the color wheel](https://neiloseman.com/colour-schemes/rgb-color-wheel-500/) Each color in the color wheel has a property called hue, the position of the color (in angle degrees) on the wheel. The hue-rotate filter accepts a [CSS angle value](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) (`deg`, `grad`, `rad`, or `turn`) and shifts the hue value of each color present on an element relative to the amount you specify, updating all colors relative to their hue’s starting point. For example, red is at 0 degrees on the color wheel, and blue is at 240 degrees. If a portion of an image contains red, passing a value of `240deg` to the `hue-rotate` filter will shift the hues of all the colors on the image by 240 degrees, turning that part of the image from red to blue. The code below adds a hue rotation of 180 degrees to an image: ``` img { filter: hue-rotate(180deg) }Code language: CSS (css) ``` The result: Note, the unit identifier for the hue-rotate filter is optional for zero angles. For example, both`rotate(0deg)`and`rotate(0)`are valid, but`hue-rotate(45)`is not. ## invert ``` .turn-color-negative { filter: invert( | ); }Code language: CSS (css) ``` Remember the color wheel mentioned in the section above? When applied to an element or image, the CSS invert filter flips the hue of every color present by 180 degrees, converting each color to the color directly opposite it on the color wheel. An illustration of the color wheel Bright areas become dark, red becomes cyan, magenta turns green, blue becomes yellow, and vice-versa, giving the image a color-negative effect. The invert filter accepts a decimal value between 0 and 1, or a percentage value up to 100% that controls the extent of the color-negative effect. A value of 0.5 or 50% turns an image completely gray. The code below inverts the colors on an image by 80%: ``` img { filter: invert(80%); }Code language: CSS (css) ``` The result: ## opacity ``` .transparent { filter: opacity( | ) }Code language: CSS (css) ``` The opacity filter applies a transparency effect to an element’s colors. It accepts a percentage or decimal value to decide how much transparency to apply to an image. An opacity of 0% or 0 will result in a completely transparent element. 100% opacity will show no transparency. Setting the opacity between 0% and 100% will give the element or image partial transparency. The code below adds an opacity of 35% to an image: ``` img { filter: opacity(35%); }Code language: CSS (css) ``` The result: You might notice that the opacity filter works just like the CSS [opacity property](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) because both control how transparent an element should be. The difference and why you should prefer the opacity filter over the CSS opacity property is that CSS filters are hardware-accelerated. When you use the opacity filter to add opacity to an element, the browser will offload the computing task onto the Graphics Processing Unit (GPU) — a specialized processor designed to accelerate graphics rendering within the system. This increases the browser’s efficiency and frees up the CPU to perform other tasks. ## saturate ``` .enhance { filter: saturate( | ); }Code language: CSS (css) ``` The CSS saturate filter enhances or decreases the intensity of a color, known as its saturation, making it appear more or less vivid. It accepts a decimal value between 0 and 1, or a percentage value. A value of 100% or 1 keeps the color as is. A value above 100% or 1 amplifies the color’s intensity, making it more vibrant (saturated), while values below that reduce the color’s intensity, making the color grayed and dull (desaturated). The code below applies a 172% saturation to an image: ``` img { filter: saturate(172%); }Code language: CSS (css) ``` The result: ## sepia ``` .nineties-effect { filter: sepia( | ); }Code language: CSS (css) ``` The sepia filter adds a soft brownish color tone to an image, giving it a warmer and vintage appearance that is calming to the eye. It is similar to using the grayscale filter but with a brownish color tone. It accepts a decimal value between 0 and 1, or a percentage value up to 100%. A value of 0 leaves the image unchanged. A value of 100% or 1 changes the image entirely to sepia, and values between 0% and 100% give the image a tone between its original color and completely sepia. The code below calls the sepia filter with a percentage value of 100%, converting the image to be completely sepia: ``` img { filter: sepia(100%); }Code language: CSS (css) ``` The result: ## drop-shadow ``` .shadow { filter: drop-shadow( ); }Code language: CSS (css) ``` The CSS drop-shadow filter applies an (often blurry) background shadow to an element, giving it a more three-dimensional look. The drop-shadow filter accepts four parameters when applying a drop shadow to an element: - ``: A CSS length value that specifies the horizontal distance between the element and the drop shadow. Positive values place the shadow to the element’s right, and negative values place the shadow to the left. - ``: A CSS length value that specifies the vertical distance between the element and the drop shadow. Positive values place the shadow below the element, and negative values place the shadow above it. - ``: The blur radius of the shadow is specified as a CSS length unit. The larger the value, the more blurred the shadow becomes. If left unspecified, it defaults to 0, producing a sharp and unblurred shadow. No negative values are permitted. - ``: The color of the shadow, specified as a [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). If left unspecified, it defaults to the color black. Here’s an example of setting a drop shadow to an element: ``` img { filter: drop-shadow(30px 30px 50px #000); }Code language: CSS (css) ``` The code above adds a black shadow with a 50px blur to the image, setting it 30px to the right of the image and 30px below it. Here’s the result: The `drop-shadow` filter looks much like the CSS ` [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) ` property at first glance. However, there’s a difference between the two, and it’s worth comparing those differences to know when to prefer one over the other. One difference between the `drop-shadow` filter and the `box-shadow` property is the `drop-shadow` filter does not accept the `inset` keyword, which, when set, rather than aligning the shadow behind the element, inserts the shadow within the element, giving it a framed appearance. For example: ``` div { height: 200px; width: 200px; background: #fff; border-radius: 20px; margin: 20px; box-shadow: inset 15px 12px 30px #000; } Code language: CSS (css) ``` The result: The result of using the `insert` keyword that’s only available to the `box-shadow` property to insert the shadow into the div. Another difference between the `drop-shadow` filter and the `box-shadow` property is the `drop-shadow` filter does not accept the parameter — a CSS length value that specifies how wide the shadow will span. Positive values cause the shadow to enlarge, and negative values cause the shadow to shrink. If not specified, it will default to a value of 0 (the shadow will be the same size as the element). Example: ``` img { box-shadow: 30px 40px 50px 70px gray; }Code language: CSS (css) ``` The code above adds a gray shadow with a 50px blur to an image, passing an additional length value of 70px that signifies the shadow will span 50px more than the image in width. The result: Lastly, to explain the significant difference between the `drop-shadow` filter and the `box-shadow` property, we’ll be using the CoderPad logo below. The CoderPad logo If the `box-shadow` property is used to add a shadow to the CoderPad logo above: ``` .coderpad { box-shadow: 10px 10px 30px #000; }Code language: CSS (css) ``` It results to the image below: Notice that the shadow is applied to a rectangular box around the logo? This is because CSS uses a [box model](https://www.w3.org/TR/CSS2/box.html), where the edges of an element are bound in a rectangular box containing its padding, border, and margin properties. Even in cases where the element does not appear to have a rectangular shape, the box is still there, which is where the shadow will be applied. CSS filters are not bound to the box model. That means that the drop-shadow filter will only consider the outline of the CoderPad logo, ignoring its box model so that only the contents of the logo receive the shadow. For example: ``` .coderpad { filter: drop-shadow(15px 10px 28px #000); }Code language: CSS (css) ``` The result: Deciding which method to use between `drop-shadow` and `box-shadow` is totally up to you based on the effect you want to achieve. ## url ``` .svg-filter { filter: url('#selector-of-your-svg-filter-here'); /* you can also load filters from external SVGs this way: */ filter: url('filters.svg#name-of-your-other-filter-here'); }Code language: CSS (css) ``` The url filter takes a string value pointing to an SVG filter element and applies its effects to an HTML element. The SVG filter element `` is used to add special visual effects to SVG graphics. Syntax: ``` ... ... ... Code language: HTML, XML (xml) ``` The `` tag takes a required id attribute to identify the filter. We can then use the url filter to apply the SVG filters to HTML elements using either the id selector of the filter or a link to it. For example, the code below defines a blur filter using the `` filter tag: ``` Code language: HTML, XML (xml) ``` Now, you can apply the SVG filter to an element by passing its id to the url filter: ``` img { filter: url("#blur-filter"); }Code language: CSS (css) ``` Here’s the result. ## Other Usage Notes Here are a few more points to note when using CSS filters. ### Using Multiple CSS Filters Throughout this article, we have only looked at using a single CSS filter per section. However, you may combine two or more CSS filters to manipulate the rendering of an element. Syntax: ``` .multiple-effects { filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); }Code language: CSS (css) ``` We can pass two or more of the 11 CSS filters to the filter property, and CSS applies them to the element according to the order they appear. For example: ``` img { filter: opacity(50%) drop-shadow(20px 10px 0px black); }Code language: CSS (css) ``` The `opacity` filter comes first in the filter property in the code above before the `drop-shadow`. When rendering the image in the browser, CSS will apply an opacity of 50% to the image, making it partially transparent, before adding a drop-shadow. Here’s the result: Reversing the order of the filter properties changes the result: ``` img { filter: drop-shadow(20px 10px 0px black) opacity(50%); }Code language: CSS (css) ``` ### Usage with the initial and inherit keywords In addition to the 11 CSS filters, the filter property accepts two extra values. - initial: The default value of the filter property — resolves to “none”. - inherit: The computed value of the filter property from an element’s direct parent. ## Try using CSS filters yourself! Hopefully, you now have a thorough understanding of all 11 CSS filters, how they work, and how you can use them to apply different visual effects to the elements on your websites. CSS filters give you more independence from photo editing software when creating production assets and visual effects for your websites—helping save on both time and money. They enable you to apply these visual effects directly in the browser. If you’d like to read more informative articles from our blog, check out the related posts below: - [The Complete Guide to Regular Expressions (Regex)](https://coderpad.io/blog/development/the-complete-guide-to-regular-expressions-regex/) - [Rules of React’s useEffect](https://coderpad.io/blog/development/rules-of-reacts-useeffect/) - [Dev Discussions: Intro to the Jamstack with Salma Alam-Naylor of Netlify](https://coderpad.io/blog/development/intro-to-jamstack-with-salma-alam-naylor/) [Victor](https://twitter.com/Victor_codejs) is a frontend developer and technical writer interested in the JAMStack. and has a knack for breaking down developer concepts to understandable bits for others. ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Development ## What is Prompt Engineering? Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post. Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development ## A Guide To Using React’s useCallback() Hook Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together. Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development ## MySQL vs. PostgreSQL: How Do They Compare? A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you. Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development ## PostgreSQL LIKE Operator: A Detailed Guide When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator. Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development ## How To Use DataProvider In TestNG With Examples When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG. Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development ## How To Get Up And Running With Django Migrations: A Guide Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects. Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development ## Writing A Parameterized Test In JUnit With Examples A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide. Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development ## How To Use Assert In JUnit With Examples The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples. Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development ## A Simple Guide To TypeORM: What It Is And How To Use It Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is. Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development ## Using PreparedStatement in JDBC With Examples In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code. Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development ## React vs React Native: The Differences Explained React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice. Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development ## Logging in Django The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article. Read the post](https://coderpad.io/blog/development/logging-in-django/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)