15 CSS Glassmorphism Examples and Code

CSS Glassmorphism is a design technique that creates blurred elements allowing the background to be seen. This employs the use of using transparent HTML elements and a CSS blur effect. This can be achieved by using the CSS box-shadow and CSS backdrop-filter or filter blur. Here is a collection of glassmorphism examples from codepen.io and around the web. Additionally, you are free to use these in your projects.

CSS Glassmorphism Creative Cloud App
CSS Glassmorphism Creative Cloud App

About Project

CSS Glassmorphism Creative Cloud App

Author

  • Aysenur Turk
  • codepen.io
CSS Glassmorphism With Text
CSS Glassmorphism With Text

About Project

CSS Glassmorphism With Text

Author

  • Albert
  • codepen.io
CSS Glassmorphic Sign In Form
CSS Glassmorphic Sign In Form

About Project

CSS Glassmorphic Sign In Form

Author

  • Shounak Das
  • codepen.io
Glassmorphism Credit and Debit Card Pure CSS
Glassmorphism Credit and Debit Card Pure CSS

About Project

Glassmorphism Credit and Debit Card Pure CSS

Author

  • Shounak Das
  • codepen.io
Glassmorphism CSS Tilting Cards
Glassmorphism CSS Tilting Cards

About Project

Glassmorphism CSS Tilting Cards

Author

  • Jayasree
  • codepen.io
Animated Glassmorphism HTML Element
Animated Glassmorphism HTML Element

About Project

Animated Glassmorphism HTML Element

Author

  • Vihanga nivarthana
  • codepen.io
Glassmorphism Color Changing Login Form
Glassmorphism Color Changing Login Form

About Project

Glassmorphism Color Changing Login Form

Author

  • Sebi
  • codepen.io
Simple Glassmorphism Light and Dark
Simple Glassmorphism Light and Dark

About Project

Simple Glassmorphism Light and Dark

Author

  • Cristiano Luis
  • codepen.io
CSS Glassmorphism Element With Text
CSS Glassmorphism Element With Text

About Project

CSS Glassmorphism Element With Text

Author

  • Supriya
  • codepen.io
CSS Glassmorphism Opacity Levels Chart
CSS Glassmorphism Opacity Levels Chart

About Project

CSS Glassmorphism Opacity Levels Chart

Author

  • Sambat
  • codepen.io
Apple Pay Glassmorphism Dark and Light Mode
Apple Pay Glassmorphism Dark and Light Mode

About Project

Apple Pay Glassmorphism Dark and Light Mode

Author

  • Cristiano Luis
  • codepen.io
CSS Glassmorphism Calculator
CSS Glassmorphism Calculator

About Project

CSS Glassmorphism Calculator

Author

  • Sowjanya
  • codepen.io
CSS Glassmorphism Hero Banner
CSS Glassmorphism Hero Banner

About Project

CSS Glassmorphism Hero Banner

Author

  • Shounak Das
  • codepen.io
Glassmorphism CSS Animation
Glassmorphism CSS Animation

About Project

Glassmorphism CSS Animation

Author

  • jSpilka95
  • codepen.io
Glassmorphism CSS Flex Grid
Glassmorphism CSS Flex Grid

About Project

Glassmorphism CSS Flex Grid

Author

  • Vinothkanna
  • codepen.io

Recommended Articles