Basic CSS Filter Functions
- Drop Shadow
- Gray Scale
- Hue Rotate
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.
} /* Here we have a 3px blur function*/
/* The code below shows the syntax for all the other functions */
filter: drop-shadow(3px 5px 2px blue);
filter: hue-rotate(30deg;) /* We can use rads or turns */
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
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 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
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
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.
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 (
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
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
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
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 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.
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.