What countless writers on Medium are writing about and users of Apple's messenger call their UI update is what VS code modders dubbed "vscode-frosted-glass-theme": The design principle I am talking about is called Glassmorphism and from big tech to smaller outlets everyone seems to play with it. The effect itself is usually based on creating a semi-transparent frosted glass look based on the CSS property backdrop-filter and creates looks like this:
If you want to explore this trend, feel free to explore a little (and free) starter template:
Very simple gaudiamus example to build on top of.
- fork this repository
- clone & enjoy
- SASS (dartSass, as libSASS is deprecated and does not support some used features)
style/_variables.scss is a good starting point.
It includes common Gaudiamus variables and controls values like
colors, breakpoints etc.
Handles button & icon behavior
Handles card glassmorphism
Masking, clipping & scrollbar
HTML form elements (input, textarea, select, checkbox)
Navbar & mobile menu
Main stylesheet & font setup
VanillaJS toggle e.g. for menu behavior. Should work nicely with all frameworks.
You can fork & clone and directly play with the HTML, but the true power comes with the included sass files for customization.
This template is built on gaudiamus and is therefore a great way to learn the ins and outs of CSS preprocessing with SASS, a powerful and useful tool when it comes to creating websites, designs & behavior.