title: backdrop-filter vs filter
body: <p>Recently I found 2 similar properties and can't figure out what's the differences between them.</p>
  
  <p>Can you explain me please? Why does properties <code>backdrop-filter</code> and <code>filter</code> exists at the same time? </p>
  
  <p>As I see (<a href="https://drafts.fxtf.org/filter-effects/#FilterProperty" rel="noreferrer">here</a> and <a href="https://www.w3.org/TR/filter-effects-1/" rel="noreferrer">here</a>) they do the same things:</p>
  
  <ul>
  <li><code>grayscale()</code></li>
  <li><code>sepia()</code></li>
  <li><code>saturate()</code></li>
  <li><code>hue-rotate()</code></li>
  <li><code>invert()</code></li>
  <li><code>opacity()</code></li>
  <li><code>brightness()</code></li>
  <li><code>contrast()</code></li>
  <li><code>drop-shadow()</code></li>
  </ul>
  
  <p>When we should use <code>backdrop-filter</code> and when just <code>filter</code>?</p>
  
  <p>caniuse.com says (<a href="https://caniuse.com/#search=filter" rel="noreferrer">here</a> and <a href="https://caniuse.com/#search=backdrop-filter" rel="noreferrer">here</a>) that modern browsers supports <code>filter</code> much better than <code>backdrop-filter</code>.</p>