Create Stunning Glassmorphism and Gradient Mesh Effects

In this video, I'll guide you through creating two popular web design effects, Glassmorphism and Gradient Meshes, using Bricks Builder. But don't worry, these techniques can be applied to any builder that supports custom CSS.

What You'll Learn:
1. Glassmorphism Navigation Bar: Learn how to add a sleek, semi-transparent navigation bar with a blur effect.
2. Gradient Mesh Background: Discover how to create vibrant gradient mesh backgrounds to enhance your hero sections.

Tools & Resources:
- Bricks Builder: Our main tool for applying these effects.
- Mesher by CSS Hero: A free tool to visually create gradient meshes.
- CSS.glass: A free tool to generate Glassmorphism CSS.

Links:

Take your WordPress website and skills to the next level!

► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.

► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

► EXCLUSIVE WPTUTS DISCOUNTS ◄

► MY PREFERRED HOSTING PROVIDERS ◄

► WORDPRESS VISUAL PAGE BUILDERS ◄

► WORDPRESS THEMES ◄

► WORDPRESS TOOLS ◄

► WORDPRESS PLUGINS ◄

► SUBSCRIBE ◄

► LETS CONNECT: ◄

[BGdev]

My man Paul with the killer tuts is back! Love this one!

[christian-k]

Thanks for these simple but also effective great tips, especially for the CSS generators. Quite handy.

[mad]

Great! Please make even tutorials on all components for a real premium website like:
animated offpage canvas menu (full screen), GSAP animations, Ken Burns effect, parallax scrolling, scroll reveal, morphing SVG, particles animation, text typing animation, content carousels, glitch effect, Lottie animations, sticky elements, floating (fixed) buttons on screen

[RichardWadeUK]

This is pure class mate... Keep up the great work

[eBYTEmedia]

Awesome and simple! Thanks for sharing 😊

[HarryThomas_HMTdesign]

You didn't mention that the user will need to make the header sticky in order to get it to stay there. Thanks for the links to those two sites!

[davidwalls]

Paul, love the videos that are incorporating more CSS. Question regarding the glass morphism effect, when you select the nav elements, does the morphism effect extend down with the nav as it grows?

[AJ-Pixelyze]

Great tutorial but the only downside of this is when it comes to mobile view and you press to open menu, it breaks the layout. I had it and the backdrop-filter breaks so you would need to work around it.

[pburmester]

How about animated mesh gradients? There's a lot of them on awwwards but any good tutorial 😢