Question 283109 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a "mesh" transparency overlay effect?

In the Element Plus doc site, the header has a nice shading transparency effect, you can see it in the image below:

mesh effect

How can I achieve a similar transparency effect as the on the Element Plus site header?
I’d like to do my own effect similar to the one above. But I don’t even know where to begin.

I have been researching CSS transparency effects but found nothing that resembles the above. I expect some initial directions to be able to do my own research on this theme

Tags:

2

Answers


  1. 0

    This is the code used on the header, which is .navbar-wrapper on the example site. Place it on your parent nav element and see if that works for you.

    .navbar-wrapper {
    background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
}

    Make sure that your navbar is transparent or the effect won’t work.

    Login or Signup to reply.
  2. 0

    Leverage radial-gradient, background-size and backdrop-filter

    They’re pulling off the "blurred mesh" effect with a clever use of radial-gradient, background-size and backdrop-filter, applied to their navbar:

    .navbar-wrapper {
    
    /* This is what creates a "transparent dot", with the color matching the webpage background */
    background-image: radial-gradient(transparent 1px, #dfa9a9 1px);

    /* This is what creates the mesh effect. If you give the background a tiny size, like 4x4, the browser, doing what it does, ends up repeating the background (a single 4x4 "dot") over and over to fill all available space, ultimately making a mesh. */
    background-size: 4px 4px;

   /* This is what delivers the blurryness and a bit of a color reduction. Backdrop-filter only applies to pixels that appear lower than the z-level of the element it's applied to, ie content-in-the-background. Keep in mind backdrop-filter is a resource intensive effect. For small usage like this, it's okay. */
    backdrop-filter: saturate(50%) blur(4px);
}

    See demo: https://codepen.io/MarsAndBack/pen/rNPmbxd

    body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

#app {
  width: 100%;
  height: 100%;
  background-color: white;
}
  
#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-image: radial-gradient(transparent 1px, white 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px); 
}


#content {
  width: 500px;
  height: 100%;
  overflow: auto;
  margin: 0 auto;
}
    <div id="app">
  
  <div id="header">
    Hello this is the header!
  </div>
  
  <div id="content">
    
    <div id="content_inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac mi vitae elit porttitor dictum. Morbi eu dignissim turpis. Duis auctor arcu vel tortor sagittis, et porttitor urna dignissim. Cras vel luctus lacus. Pellentesque at mauris convallis, porttitor dui vel, pretium diam. Donec non nisi purus. Curabitur purus lectus, elementum eu iaculis at, ultricies eget magna. Fusce at lorem diam. Etiam lacinia malesuada nisi, ut fringilla odio. Donec dignissim sem quam, non fringilla sem gravida in.

Integer ut velit vitae sapien tincidunt scelerisque nec eu magna. Sed imperdiet posuere libero, id aliquet neque. Mauris gravida lacus dui, vel tempus ante consequat nec. Aliquam aliquam leo vitae pulvinar semper. Integer vitae ornare lacus. Mauris imperdiet mi nec porta bibendum. Nunc sit amet tristique augue, eu finibus elit. Duis scelerisque, elit ac pharetra placerat, tortor mauris imperdiet nisl, ac ultricies est turpis vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus porttitor diam vel convallis luctus. Cras consectetur tortor in faucibus fermentum. Etiam a congue urna, et venenatis ante. In ultricies, neque vitae ultricies pulvinar, urna massa tincidunt orci, a ullamcorper lorem dui ut tellus. Etiam iaculis et nisi ut maximus. Praesent rutrum tincidunt odio, eu mattis metus mattis ut. Vestibulum fringilla, ipsum sed lacinia sollicitudin, ex massa pulvinar sapien, blandit dictum justo nulla interdum felis. Proin vel neque massa. Nam ornare purus eget magna aliquam, quis feugiat nisl molestie. Proin sit amet condimentum mi, vitae sollicitudin libero. Phasellus in mi mollis, viverra arcu in, maximus diam.

Nunc scelerisque sapien vel turpis tincidunt, eu tristique diam interdum. Nam vitae mauris non nibh gravida porta. Donec eget sagittis elit, at elementum est. Sed nulla sem, feugiat at mattis sed, dictum quis nunc. Morbi et tristique arcu. Quisque ultricies, ipsum in lobortis facilisis, augue justo pellentesque nisi, quis mattis purus turpis id purus. Mauris rutrum nulla ante, non mattis erat facilisis sed. Fusce nec porta dolor. Morbi bibendum nibh sed sollicitudin aliquam. Maecenas ut magna eu urna ultricies luctus.

Nulla auctor libero ultricies mauris facilisis, eget porttitor diam porttitor. Sed et tempus ex. Suspendisse at mauris non enim tempus scelerisque. Mauris rutrum augue quis viverra mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue ante, dignissim quis ultrices eget, ullamcorper quis sem. Vivamus ut velit id dui iaculis maximus. Praesent finibus eget ligula quis finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eleifend a augue at feugiat. Proin luctus pharetra est a ultricies. Donec commodo eleifend elit vitae tempus. Mauris ac interdum lectus. Donec viverra, eros vitae consectetur tincidunt, magna tortor pharetra ipsum, nec cursus ligula dolor et mi. Nulla facilisi. Nulla iaculis quam ut imperdiet euismod.
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac mi vitae elit porttitor dictum. Morbi eu dignissim turpis. Duis auctor arcu vel tortor sagittis, et porttitor urna dignissim. Cras vel luctus lacus. Pellentesque at mauris convallis, porttitor dui vel, pretium diam. Donec non nisi purus. Curabitur purus lectus, elementum eu iaculis at, ultricies eget magna. Fusce at lorem diam. Etiam lacinia malesuada nisi, ut fringilla odio. Donec dignissim sem quam, non fringilla sem gravida in.

Integer ut velit vitae sapien tincidunt scelerisque nec eu magna. Sed imperdiet posuere libero, id aliquet neque. Mauris gravida lacus dui, vel tempus ante consequat nec. Aliquam aliquam leo vitae pulvinar semper. Integer vitae ornare lacus. Mauris imperdiet mi nec porta bibendum. Nunc sit amet tristique augue, eu finibus elit. Duis scelerisque, elit ac pharetra placerat, tortor mauris imperdiet nisl, ac ultricies est turpis vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus porttitor diam vel convallis luctus. Cras consectetur tortor in faucibus fermentum. Etiam a congue urna, et venenatis ante. In ultricies, neque vitae ultricies pulvinar, urna massa tincidunt orci, a ullamcorper lorem dui ut tellus. Etiam iaculis et nisi ut maximus. Praesent rutrum tincidunt odio, eu mattis metus mattis ut. Vestibulum fringilla, ipsum sed lacinia sollicitudin, ex massa pulvinar sapien, blandit dictum justo nulla interdum felis. Proin vel neque massa. Nam ornare purus eget magna aliquam, quis feugiat nisl molestie. Proin sit amet condimentum mi, vitae sollicitudin libero. Phasellus in mi mollis, viverra arcu in, maximus diam.

Nunc scelerisque sapien vel turpis tincidunt, eu tristique diam interdum. Nam vitae mauris non nibh gravida porta. Donec eget sagittis elit, at elementum est. Sed nulla sem, feugiat at mattis sed, dictum quis nunc. Morbi et tristique arcu. Quisque ultricies, ipsum in lobortis facilisis, augue justo pellentesque nisi, quis mattis purus turpis id purus. Mauris rutrum nulla ante, non mattis erat facilisis sed. Fusce nec porta dolor. Morbi bibendum nibh sed sollicitudin aliquam. Maecenas ut magna eu urna ultricies luctus.

Nulla auctor libero ultricies mauris facilisis, eget porttitor diam porttitor. Sed et tempus ex. Suspendisse at mauris non enim tempus scelerisque. Mauris rutrum augue quis viverra mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue ante, dignissim quis ultrices eget, ullamcorper quis sem. Vivamus ut velit id dui iaculis maximus. Praesent finibus eget ligula quis finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eleifend a augue at feugiat. Proin luctus pharetra est a ultricies. Donec commodo eleifend elit vitae tempus. Mauris ac interdum lectus. Donec viverra, eros vitae consectetur tincidunt, magna tortor pharetra ipsum, nec cursus ligula dolor et mi. Nulla facilisi. Nulla iaculis quam ut imperdiet euismod.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac mi vitae elit porttitor dictum. Morbi eu dignissim turpis. Duis auctor arcu vel tortor sagittis, et porttitor urna dignissim. Cras vel luctus lacus. Pellentesque at mauris convallis, porttitor dui vel, pretium diam. Donec non nisi purus. Curabitur purus lectus, elementum eu iaculis at, ultricies eget magna. Fusce at lorem diam. Etiam lacinia malesuada nisi, ut fringilla odio. Donec dignissim sem quam, non fringilla sem gravida in.

Integer ut velit vitae sapien tincidunt scelerisque nec eu magna. Sed imperdiet posuere libero, id aliquet neque. Mauris gravida lacus dui, vel tempus ante consequat nec. Aliquam aliquam leo vitae pulvinar semper. Integer vitae ornare lacus. Mauris imperdiet mi nec porta bibendum. Nunc sit amet tristique augue, eu finibus elit. Duis scelerisque, elit ac pharetra placerat, tortor mauris imperdiet nisl, ac ultricies est turpis vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus porttitor diam vel convallis luctus. Cras consectetur tortor in faucibus fermentum. Etiam a congue urna, et venenatis ante. In ultricies, neque vitae ultricies pulvinar, urna massa tincidunt orci, a ullamcorper lorem dui ut tellus. Etiam iaculis et nisi ut maximus. Praesent rutrum tincidunt odio, eu mattis metus mattis ut. Vestibulum fringilla, ipsum sed lacinia sollicitudin, ex massa pulvinar sapien, blandit dictum justo nulla interdum felis. Proin vel neque massa. Nam ornare purus eget magna aliquam, quis feugiat nisl molestie. Proin sit amet condimentum mi, vitae sollicitudin libero. Phasellus in mi mollis, viverra arcu in, maximus diam.

Nunc scelerisque sapien vel turpis tincidunt, eu tristique diam interdum. Nam vitae mauris non nibh gravida porta. Donec eget sagittis elit, at elementum est. Sed nulla sem, feugiat at mattis sed, dictum quis nunc. Morbi et tristique arcu. Quisque ultricies, ipsum in lobortis facilisis, augue justo pellentesque nisi, quis mattis purus turpis id purus. Mauris rutrum nulla ante, non mattis erat facilisis sed. Fusce nec porta dolor. Morbi bibendum nibh sed sollicitudin aliquam. Maecenas ut magna eu urna ultricies luctus.

Nulla auctor libero ultricies mauris facilisis, eget porttitor diam porttitor. Sed et tempus ex. Suspendisse at mauris non enim tempus scelerisque. Mauris rutrum augue quis viverra mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue ante, dignissim quis ultrices eget, ullamcorper quis sem. Vivamus ut velit id dui iaculis maximus. Praesent finibus eget ligula quis finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eleifend a augue at feugiat. Proin luctus pharetra est a ultricies. Donec commodo eleifend elit vitae tempus. Mauris ac interdum lectus. Donec viverra, eros vitae consectetur tincidunt, magna tortor pharetra ipsum, nec cursus ligula dolor et mi. Nulla facilisi. Nulla iaculis quam ut imperdiet euismod.
  </div>
 </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search