How to Create Glassmorphic Elements in HTML & CSS | Glassmorphism Tutorial

Glassmorphism is pretty easy to achieve for front-end developers. There is one main CSS property that we can use: backdrop-filter. This property allows you to apply multiple effects such as blur, sepia, and greyscale to the area behind your component. Since it applies to everything behind the component, to see the effect, you must make this element at least partially transparent.

In this video we are going to learn about creating glassmorphism in HTML & CSS in 6 Minutes.

[andersonsilva]

Thank you, informative and fun to watch.
Sugestion/request: parallax effect next :)

[haiderrizvi]

How do you place your taskbar icons in the center?

[tupacan]

These tutorials w/o speaking or w/ some boring background music is so painful to watch. And that text-to-speech at the beginning is the worst.

Just my two cents.