CSS Filter Functions

In this tutorial we are going to learn about CSS Filter functions. At the end of this tutorial you will have enough knowledge on CSS filter functions and effects. Also, we are going to learn how to build a simple photo editor with CSS Filter Functions. For this tutorial you don't need to be an expert in HTML, CSS, and JavaScript. Although you need some knowledge in these three web development technologies. Let us start learning CSS Filter Functions.

Basic CSS Filter Functions

In this tutorial we assume that you have basic knowledge of HTML, CSS, and JavaScript. CSS filter functions cause really nice effect in HTML once we apply them. The effect is mostly in color; for that reason in this tutorial we are going to use many pictures to show you their effect. Below we list some of the most used CSS Filter Functions.

• Blur
• Brightness
• Contrast
• Drop Shadow
• Gray Scale

• Hue Rotate
• Invert
• Opacity
• Saturate
• Sepia

Syntax of CSS filter functions

The syntax of CSS filter functions is similar for most of them. We only add the filter property to the selector we desire. Then we add as value the function we need to apply. Most of the values are similar. In some of them the only thing that varies is the styling unit or the number of parameters. We show you below the syntax of CSS Filter functions.

#selector{ filter: blur(3px);}     /* Here we have  a 3px blur function*//* The code below shows the syntax for all the other functions */filter: blur(3px);filter: brightness(30%);filter: contrast(70%);filter: drop-shadow(3px 5px 2px blue);filter: grayscale(75%);filter: hue-rotate(30deg;) /* We can use rads or turns */filter: invert(10%); filter: opacity(90%);filter: saturate(125%);filter: sepia( 30%);

As we stated before, the function and values are similar. The only thing that changes is the unit in some of them. If you carefully watch the code above, you will notice that blur, drop-shadow, and hue-rotate have different units. The rest of them use percentages.

Opacity as a Filter Function

As you may already know, opacity is a CSS Property that we can use without filters. The value of opacity is a number between 0 and 1. The 0 value is total opacity and the value of 1 is no Opacity. We can use opacity as a CSS Filter function. The code above shows you that instead of 0 and 1 we use percentages for opacity values.

Drop Shadow Filter

As you may know in CSS we can create a shadow for any element using the box-shadow or the text-shadow property. In order to create a different shadow effect for any HTML element we can use CSS Filter functions. The filter function we use is the drop-shadow() function. As you may notice, this function can contain three or four parameters. The first three parameters are for the offsets, and the fourth is for the color we desire for our shadow. The example below shows you the effect of drop-shadow function. As you can see that is different of box-shadow or text-shadow. You can see the effect in the image. As you may also see, we can use negative numbers to drop the shadow in the opposite direction.

Blur Effect

We also have the ability to add some blur effect to any HTML property using CSS Filter functions. As it implies; this effect is going to blur the property. The blur functions is one of the functions which doesn't use percentages. We can use pixels or any CSS measuring unit (em, rem). The example below shows how to blur an image with filter functions. As you can see we use an input type range and some JavaScript. in order to see the variation of blur. You can see that 0px is no effect, and we have a maximum blur of 10px. You can add the maximum and the unit you wish.

Hue Rotate and Invert

The hue-rotate and the invert functions have different effects in elements. I think you already noticed that hue-rotate function use angle units. That function is not literally going to rotate the element. It's going to rotate the hue of the color in a different angle. In other words, this function is going to cause a color turning effect. Also, the invert function is going to invert the color to the element using percentages. I mean it's going to invert the color only to the percentage we desire. In the example below we show you these two effects. We used some animation keyframes in this example. With animation keyframes you can see how the effect occurs in a some time.

Filter Function Effects

You can see some of the effects of CSS Filter functions in the previous examples. As you may notice most of the effects are in color. The value of the filter functions is straightforward. So in the example below we show you the effect of most CSS Filter functions. We use some JavaScript and range inputs. Once you change the range inputs you can see the effects on the image

Combining CSS Filter Functions

The example above shows you the effects of most CSS Filter functions. The only problem with that is that you can see only one effect on the image. Each time you apply one effect, the other one goes away. Using CSS Filter functions, we have the ability to combine all of them and produce all the effects in one element. It's very easy to combine CSS Filter functions. The example below shows you the syntax for combining CSS Filter functions

#selector{   filter:  contrast(120%)  saturation(25%);  }

The syntax example above shows how to combine only two filter functions. You can combine as many functions as you want; not only two.

Creating Your Own Photo Editor

In the previous section you could see how to apply each effect of CSS Filter functions. Then you saw that you have the ability to combine them and apply all the effects to one element. To provide you with an example, we created a simple photo editor with most of the CSS Filter functions effects. We also added some JavaScript and used many type range inputs. You can see that JavaScript code is a little bit wider. That is because we repeated some variables for each function. If you want to create a photo editor like this one, you only need to declare these variables as global variables. Also you cannot scale or rotate the image because we are only showing the CSS Filter functions.

In case you want to scale or rotate the image, we recommend you to see our CSS Transform Transitions and Animations Tutorial

CSS Filter functions global values

In the photo editor example above, you can see that we also added a button to reset the image. That button calls the revert value of CSS Filter functions. Besides revert, there are many other global values for filter functions. They are not functions. For that reason they don't need a parenthesis. Below we show you the syntax for them.

filter: inherit;filter: initial;filter: revert;filter: revert-layer;filter: unset;

Conclusion

This tutorial shows how to implement CSS Filter functions. You can see the effect they cause is really nice. You could see that we also used a lot of range type inputs. All the images we use in this tutorial can be found in Pixabay. In case you need more Information about CSS Filter functions, we encourage you to read the Filters MDN.

Thanks and we hope you learned a lot with this tutorial.

More at Moe's Link