CSS Filter
Tags: beginners, css, html, webdev
Published: 2020-06-20 08:41:40

<!-- wp:paragraph -->
<p>The filter property is used to set the visual effect of an element. This property is mostly used to adjust the rendering of images, backgrounds, and borders. Also you can use the filter on SVG elements.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Syntax:</p>
<!-- /wp:paragraph -->

```css
filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|
url();
```

<!-- wp:heading {"level":3} -->
<h3>How filters work?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>What does a filter do exactly? The easiest way to think of a filter is as a post processing step that does something magical after all your page content has been laid out and drawn.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When a browser loads a web page it needs to apply styles, perform layout and then render the page. Filters kick in after all those steps and just before the page is copied to the screen.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>What they do, is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image. (One way to think of them is like a filter placed on the front of a camera lens)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will be discussing following properties here:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Blur</li><li>Brightness</li><li>Contrast</li><li>Drop-shadow</li><li>Grayscale</li><li>Hue-rotate</li><li>Invert</li><li>Opacity</li><li>Saturate</li><li>Sepia</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>The blur() CSS function applies a Gaussian blur to the input image</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>blur(radius)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>Larger radius value will create more blur. A value of 0 leaves the input unchanged. The lacuna value for interpolation is 0.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: blur(5px);</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":690,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/blur-1.png" alt="" class="wp-image-690"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>2. Brightness</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>brightness(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>A value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>brightness(1)    /* No effect */
brightness(150%) /* brightness will be high by 50% */
brightness(0%)   /* Completely black */</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":689,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/brightness.png" alt="" class="wp-image-689"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>3. Contrast</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The contrast() CSS function adjusts the contrast of the input image.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>contrast(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>Amount can be specified as number or percentage.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A value under 100% decreases the contrast, while a value over 100% increases it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A value of 0% will create an image that is completely gray, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"fileName":"2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */CSS","mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: contrast(1); // no change
filter: contrast(115%) // contrast will be high 15%
filter: contrast(0); // completely gray</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":691,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/contrast.png" alt="" class="wp-image-691"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>4. Drop-shadow</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The drop-shadow() CSS function applies a drop shadow effect to the input image. Also you can apply drop-shadow to SVG. 👻</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>drop-shadow(offset-x offset-y blur-radius spread-radius color)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>blur-radius and spread-radius are optional</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Blur-radius:</strong> The larger the value, the larger and more blurred the shadow becomes. Negative values are not allowed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>spread-radius:</strong> Positive values will cause the shadow to expand and grow bigger, while negative values will cause the shadow to shrink. If unspecified, it defaults to 0, and the shadow will be the same size as the input image.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><span style="text-decoration: underline;">NOTE</span></strong>: Most browser does not support spread-radius, the effect will not render if used.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"fileName":"2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */CSS","mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: drop-shadow(12px 12px 5px #1c8c9e);</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":692,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/drop-shadow.png" alt="" class="wp-image-692"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>5. Grayscale</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The grayscale() CSS function converts the input image to grayscale</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>grayscale(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>amount can be number or percentage.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The lacuna value for interpolation is 0.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>grayscale(0)     /* No effect */
grayscale(1)     /* Completely grayscale */
grayscale(100%)  /* Completely grayscale */</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":693,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/grayscale.png" alt="" class="wp-image-693"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>6. Hue-rotate</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The hue-rotate() CSS function rotates the hue of an element and its contents.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>hue-rotate shifts the hue of all the colors in the image. But why is the value in degrees? As we pick the color from wheel chart.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the color wheel:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":700,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/hue-rotate-wheel.png" alt="" class="wp-image-700"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Using hue-rotate you can push one color by x degrees on the color wheel. 360 degrees will make a complete rotation, which will mean no change at all. The value for this property also works in the negatives and -90 for example is the equivalent of 270.</p>
<!-- /wp:paragraph -->
<p><b>NOTE:</b> Positive degree moves in anti-clockwise direction and negative degree moves clockwise direction </p>
<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>hue-rotate(angle)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>A value of 0deg leaves the input unchanged.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The lacuna value for interpolation is 0.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"fileName":"2. Brightness\u003cbr\u003eThe brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker.\u003cbr\u003esyntax:\u003cbr\u003ebrightness(amount)\u003cbr\u003eA value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.\u003cbr\u003eexample:\u003cbr\u003ebrightness(1) /* No effect */ brightness(150%) /* brightness will be high by 50% */ brightness(0%) /* Completely black */CSS","mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: hue-rotate(0deg)    /* No effect */
filter: hue-rotate(.5turn)  /* 180deg rotation */
filter: hue-rotate(405deg)  /* Same as 45deg rotation */
filter: hue-rotate(-90deg); /* Same as 270deg rotation */</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":694,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/hue-rotate.png" alt="" class="wp-image-694"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>7. Invert</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The invert() CSS function inverts the color samples in the input image</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>invert(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: invert(0)     /* No effect */
filter: invert(100%)  /* Completely inverted */</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":695,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/invert.png" alt="" class="wp-image-695"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>8. Opacity</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The opacity() CSS function applies transparency to the samples in the input image</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>opacity(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>A value of 0% is completely transparent, while a value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: opacity(0%)   /* Completely transparent */
filter: opacity(1)    /* No effect */
filter: opacity(30%); /* 30% transparent */</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":696,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/opacity.png" alt="" class="wp-image-696"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>9. Saturate</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The saturate() CSS function super-saturates or desaturates the input image</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>saturate(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>A value under 100% desaturates the image, while a value over 100% super-saturates it. The lacuna value for interpolation is 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: saturate(0)     /* Completely unsaturated */
filter: saturate(100%)  /* No effect */
filter: saturate(200%)  /* Double saturation */</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":697,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/saturate.png" alt="" class="wp-image-697"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>10. Sepia</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The sepia() CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>syntax:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>sepia(amount)</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:paragraph -->
<p>A value of 100% is completely sepia, while a value of 0% leaves the input unchanged. The lacuna value for interpolation is 0.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>sepia(0)     /* No effect */
sepia(.95)   /* 95% sepia */
sepia(100%)  /* Completely sepia */
filter: sepia(70%);</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":698,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/sepia.png" alt="" class="wp-image-698"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Multiple Property:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can also apply multiple filter at a time.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When a single filter property has two or more functions it's results will be different from when two or more filter properties are separately applied with the same functions</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:codemirror-blocks/code-block {"mode":"css","mime":"text/css","theme":"abcdef"} -->
<div class="wp-block-codemirror-blocks-code-block code-block"><pre>filter: hue-rotate(-30deg) sepia(75%) contrast(150%) saturate(300%)
    hue-rotate(30deg);</pre></div>
<!-- /wp:codemirror-blocks/code-block -->

<!-- wp:image {"id":699,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/06/multiple-property.png" alt="" class="wp-image-699"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Please keep in mind that the filter property values are applied in a sequence, meaning that the input for one filter is the output of the previous filter.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Performance considerations</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>One thing that every web developer cares about is performance of their web page or application. CSS filters are a powerful tool for visual effects, but at the same time might have an impact on the performance of your site.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Firstly, not all filters are created equal. Most filters will run really quickly on any platform and have very minor performance impact.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>example:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you do a ‘blur’, it mixes the colors from pixels all around the output pixel to generate a blurred result. So, say if your ‘radius’ parameter is 2, then the filter needs to look at 2 pixels in every direction around each output pixel to generate the mixed color. This happens for each output pixel, so that means a lot of calculations that just get bigger when you increase the ‘radius’. Since ‘blur’ looks in every direction, doubling the ‘radius’ means you need to look at 4 times as many pixels so in fact it’s 4 times slower for each doubling of the ‘radius’. The ‘drop-shadow’ filter contains a ‘blur’ as part of its effect, so it too behaves just like ‘blur’ when you change the ‘radius’ and ‘spread’ parts of the ‘shadow’ parameter.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Reference:</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">https://developer.mozilla.org/en-US/docs/Web/CSS/filter</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://www.html5rocks.com/en/tutorials/filters/understanding-css/">https://www.html5rocks.com/en/tutorials/filters/understanding-css/</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I have added the code in <a href="https://codepen.io/suprabhasupi/pen/JjGKMRR" target="_blank" rel="noreferrer noopener">codepen</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading this article ♥️</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope you love the article. If you have any question, please feel free to ping me on <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>