CSS backdrop-filter
Tags: css, webdev, beginners, html
Published: 2020-07-19 14:26:26

<!-- wp:paragraph -->
<p>The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.</p>
<!-- /wp:paragraph -->

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

<!-- wp:list {"ordered":true} -->
<ol><li>What is backdrop-filter and its syntax?</li><li>Apply multiple filter</li><li>Explained with an example</li><li>Browser support </li><li>Reference </li></ol>
<!-- /wp:list -->

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

```css
backdrop-filter: <filter-function> [<filter-function>]* | none
```

<!-- wp:paragraph -->
<p><strong>&lt;filter-function&gt; can be any one of the following:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><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><li>url() – (for applying SVG filters)</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4>You can apply multiple filter to a backdrop.</h4>
<!-- /wp:heading -->

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

```css
backdrop-filter: grayscale(0.5) opacity(0.8)  // .... and more
```

<!-- wp:paragraph -->
<p>Let's see an example that how we use backdrop-filter.</p>
<!-- /wp:paragraph -->

```html
<div class="container">
      <div class="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. 	             Officiis, quae distinctio magnam, laborum iusto itaque autem!             Molestiae enim distinctio molestias, dolores ea quasi magni nisi           aspernatur magnam, voluptate eum fuga.
        </p>
      </div>
</div>
```

```css
.content {
        background-color: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
}
```

<!-- wp:paragraph -->
<p><strong><span style="text-decoration: underline;">Output:</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":823,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/07/Screenshot-2020-07-18-at-12.26.01-AM-1024x755.png" alt="" class="wp-image-823"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Check out the full snippet here in <a rel="noreferrer noopener" href="https://codepen.io/suprabhasupi/pen/OJMayNp" target="_blank">@codepen</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Browser Support</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":824,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://blog.suprabha.me/wp-content/uploads/2020/07/Screenshot-2020-07-17-at-10.48.56-PM-1024x334.png" alt="" class="wp-image-824"/></figure>
<!-- /wp:image -->

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

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

<!-- wp:paragraph -->
<p>Thanks for reading the article ❤️</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope you enjoy learning from the article, let me know if you have any questions on <a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</p>
<!-- /wp:paragraph -->

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