10 Beautiful Glassmorphism Examples

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!

Glassmorphism Example

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

Glassmorphism Page

See the Pen Glassmorphism by Jayasree (@Jayasree_0708) on CodePen.light

Glassmorphism Hello

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

Glassmorphism Animated

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