How to Implement Glassmorphism via HTML and CSSby@zoltanszogyenyi
4,852 reads🖨️

How to Implement Glassmorphism via HTML and CSS

April 11th 2021
4 min
by @zoltanszogyenyi 4,852 reads🖨️
tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

Glassmorphism is a new design trend that makes use of a transparent background and a blur effect on top of the background to create a glassy effect. With the release of the Big Sur update for MacOS, it was the first large-scale adoption of this design trend by a large company. Microsoft also uses this style in the Fluent Design System, but they call it "Acrylic Material" instead of glassmorphism. You can use it for pricing cards, blog cards, profile cards, anything you'd like.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - How to Implement Glassmorphism via HTML and CSS
Zoltán Szőgyényi HackerNoon profile picture

@zoltanszogyenyi

Zoltán Szőgyényi

Learn More
LEARN MORE ABOUT @ZOLTANSZOGYENYI'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa