CODEWITHSUNDEEP
css
Abdelrhman Elmahdy
Abdelrhman Elmahdy

Reputation: 1683

How to apply blur effect on a navbar in css

I want to create a navbar similar to the one found on apple's website
currently all I can find is how to apply blur on images, but I want the blur to be applied on anything that goes behind the navbar

I tried using an svg filter but it applies the blur on the content of the navbar not on what's behind it

<style>
  .container {
    height: 100vh;
    width: 100vw;
  }
  .blur {
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
    -webkit-filter: url(#blur-filter);
    filter: url(#blur-filter);
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }
  .blur-svg {
    display: none;
  }
  .navBar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    background-color: rgba(20, 20, 20, 0.2);
  }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur stdDeviation="3"></feGaussianBlur>
    </filter>
  </defs>
</svg>
<div class="navBar blur">test</div>
<div class="container">
  <h3>Example</h3>
  <p>This example shows the effect.</p>
</div>

Upvotes: 0

Views: 8625

Answers (1)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

Use backdrop-filter property to do this or use the trivial way of using two divs (refer to Filtering Background with and without backdrop-filter

For Example:

.foreground {
 backdrop-filter: blur(0.8);
}

Note: This doesn't have the full Browser support.

One trick I want to share here, Since you want to achieve the same styling as on the Apple website, simply make use of Developer Console. Hit CTRL+SHIFT+I and see how Apple has applied the CSS for the Navbar. This way you can learn new things and achieve what you seek :)

Upvotes: 2

Related Questions