Opacity Effect with Header & Content

Can someone please explain how you would create the effect seen on this website where the content's opacity changes to a hazy white as it gets closer to the top of the viewport? I have looked through the code, but can't get the desired effect on my own. http://www.sylvainreucherand.fr/

Answers 1

  • You can create the effect as follows. Let me know if you have any problems.

    HTML:

    <body>
      <div class="haze-effect">
    </body>
    

    CSS:

    body {
      position: relative;
    }
    
    .haze-effect {
      left: 0;
      top: 0;
      position: fixed;
      height: 300px;
      width: 100%
    
      background: -webkit-linear-gradient(#fff,hsla(0,0%,100%,0));
      background: linear-gradient(#fff,hsla(0,0%,100%,0));
    }
    

Related Articles