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


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

This post may contain affiliate links. See our disclosure about affiliate links here.

Written by

Editorial Team

We are 1stWebDesigner and we’re on a mission to help you build a better web. Our team produces content created by web design professionals, for web design professionals.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *