/css-glass-styling

learning how to apply glas css styling - the new thing?

Primary LanguageHTMLMIT LicenseMIT

css-glass-styling

Glas styling is the new thing 2021? This project is based on a tutorial by Dev Ed.

Source: Youtube Video
Github: dev ed repo

Learnings

the actual glass css properties are just two!

backdrop-filter: blur(0.1rem);

the backdrop-filter blures the background behind an container. It doesnt work everywhere.

background: linear-gradient(to right bottom, hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0.2));

the glass effect comes from the gradient of white and the transparency with rgba or hsla