CSS Filter Functions
Tags: webdev, css, javascript, design
Published: 2022-09-08 20:29:19


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8tv4wg3dqygxjovtq0u.png)


<p>      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 <a href="https://moeslink.com/easy-learn-html/">HTML</a>, <a href="https://moeslink.com/intro-to-css/">CSS</a>, and <a href="https://moeslink.com/intro-to-javascript-for-web-development/">JavaScript</a>. Although you need  some knowledge in these three web development technologies.  Let us start learning CSS Filter Functions.</p>



<h3> Basic CSS Filter Functions</h3>

<!-- wp:paragraph -->
<p>       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. </p>
<!-- /wp:paragraph -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>Blur </li><li>Brightness</li><li>Contrast</li><li>Drop Shadow</li><li>Gray Scale</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:list -->
<ul><li>Hue Rotate</li><li>Invert</li><li>Opacity</li><li>Saturate</li><li>Sepia</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Syntax of CSS  filter functions</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>      The syntax of CSS filter functions is similar for most of them. We only add the <code>filter</code> 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.</p>
<!-- /wp:paragraph -->

```css
#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%);

```

<!-- wp:paragraph -->
<p>     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 <code>blur</code>, <code>drop-shadow</code>, and <code>hue-rotate</code> have different units. The rest of them use percentages.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Opacity as a Filter Function</h3>
<!-- /wp:heading -->

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

<!-- wp:heading {"level":3} -->
<h3>Drop Shadow Filter</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>      As you may know in CSS we can create a shadow for any element using the <code>box-shadow</code> or the <code>text-shadow</code> 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 <code>drop-shadow()</code> 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 <code>drop-shadow</code> function.  As you can see that is different of <code>box-shadow</code> or <code>text-shadow</code>.  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.</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/moreno8423/pen/ExLYyGm %}

<!-- wp:heading {"level":3} -->
<h3>Blur Effect</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>    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 <code>blur</code> functions is one of the functions which doesn't use percentages. We can use pixels or any CSS measuring unit (<code>em</code>, <code>rem</code>). 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 <code>0px</code> is no effect, and we have a maximum blur of <code>10px</code>. You can add the maximum and the unit you wish.</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/moreno8423/pen/BaxBbQV %}

<!-- wp:heading {"level":3} -->
<h3>Hue Rotate and Invert</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>      The <code>hue-rotate</code> and the  <code>invert</code> functions have different effects in elements.  I think you already noticed that <code>hue-rotate</code> 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 <code>invert</code> 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.</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/moreno8423/pen/mdLyNxj %}

<!-- wp:heading -->
<h2>Filter Function Effects</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>     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 </p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/moreno8423/pen/qBoeByo %}

<!-- wp:heading {"level":3} -->
<h3>Combining CSS Filter Functions</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>      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</p>
<!-- /wp:paragraph -->

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

```

<!-- wp:paragraph -->
<p>   The syntax example above shows how to combine only two filter functions.  You can combine as many functions as you want; not only two.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Creating Your Own Photo Editor</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>   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. </p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/moreno8423/pen/qBYENgq %}

<!-- wp:paragraph -->
<p>      In case you want to scale or rotate the image, we recommend you to see our <a href="https://moeslink.com/css-transforms-transitions-and-animations/">CSS Transform Transitions and Animations Tutorial</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>CSS Filter functions global values</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>     In the photo editor example above, you can see that we also added a button to reset the image. That button calls the <code>revert</code> value of CSS Filter functions. Besides <code>revert</code>, 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.</p>
<!-- /wp:paragraph -->

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

```
<!-- wp:heading {"level":3} -->
<h3>Conclusion</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>    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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range">range type inputs</a>.   All the images we use in this tutorial can be found in <a href="https://pixabay.com">Pixabay</a>.  In case you need more Information about CSS Filter functions, we encourage you to read the<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter" target="_blank" rel="noreferrer noopener"> Filters MDN</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>  Thanks and we hope you learned a lot with this tutorial. </p>
<!-- /wp:paragraph -->

More at <a href="https://moeslink.com">Moe's Link </a>