Glassmorphism is a term used to describe UI design that emphasizes light or dark objects, placed on top of colorful backgrounds. A background-blur is placed on the objects which allows the background to shine through – giving it the impression of frosted glass.
In this post we’ve collected 10 stunning examples of this design trend from Codepen. Have a look and see how you could possibly use this effect in your upcoming projects!
Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
See the Pen Glassmorphism by Albert (@walickialbert) on CodePen.light
Glassmorphism Creative Cloud App Redesign
See the Pen Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur) on CodePen.light
Glassmorphic Sign in Form
See the Pen Glassmorphic Sign in Form by Shounak Das (@dasshounak) on CodePen.light
Glassmorphism Credit/Debit Card (pure CSS)
See the Pen Glassmorphism Credit/Debit Card (pure CSS) by Shounak Das (@dasshounak) on CodePen.light
See the Pen Glassmorphism by Jayasree (@Jayasree_0708) on CodePen.light
See the Pen Glassmorphism by Vihanga nivarthana (@vihanga) on CodePen.light
Simple Glassmorphism Example
See the Pen Glassmorphism by Supriya (@omeal) on CodePen.light
Glassmorphism vs Neumorphism Cards
See the Pen Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt by Quentin Feret (@quentin-feret) on CodePen.light
See the Pen Glassmorphism Animated by jSpilka95 (@jspilka95) on CodePen.light
Glassmorphism Post grid
See the Pen Glassmorphism Post grid by Vinothkanna (@vinocrazy) on CodePen.light
This post may contain affiliate links. See our disclosure about affiliate links here.