Collection of free HTML and CSS glassmorphism effect examples from Codepen and other resources.

Related Articles

  1. CSS Neumorphism

Author

  • Tirso Lecointere

Made with

  • HTML / CSS (SCSS) / JS

About a code

Glassmorphism Calculator UI

Glassmorphism calculator UI with dark mode.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nikhil27bYt

Made with

  • HTML / CSS / JS

About a code

Glassmorphism Side Navbar With HTML & CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: line-awesome.css

Author

  • Kodplay

Made with

  • HTML / CSS

About a code

Glowing Gradient Glassmorphism Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kalimah Apps

Made with

  • HTML / CSS (SCSS) / JS

About a code

iPhone 12 vs Galaxy S21

Glassmorphic design comparing Apple iPhone 12 Pro Max vs Samsung Galaxy S21 Ultra.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: vue.js

Author

  • Alex

Made with

  • HTML / CSS (SCSS)

About a code

Product Glassmorph

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alex

Made with

  • HTML / CSS (SCSS)

About a code

Social Icon Glassmorph

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Glassmorphism Clock

Author

  • Coding Artist

Made with

  • HTML / CSS / JS

About a code

Glassmorphism Clock

Glassmorphism UI analog clock.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Glassmorphism Credit Card

Author

  • ron

Made with

  • HTML / CSS / JS

About a code

Glassmorphism Credit Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Demo image: Feedback Modal Design

Author

  • Rizky Firman Syah

Made with

  • HTML / CSS / JS

About a code

Feedback Modal Design

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Glassmorphism Creative Cloud App Redesign

Author

  • Aysenur Turk

Made with

  • HTML / CSS (SCSS) / JS

About a code

Glassmorphism Creative Cloud App Redesign

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

  • Quentin Feret

Made with

  • HTML / CSS / JS

About a code

Glassmorphism vs Neumorphism Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, vanilla-tilt.js

Author

  • Husnul Aman

Made with

  • HTML / CSS / JS

About a code

Glassmorphism and Nav Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Glassmorphism

Author

  • Jayasree

Made with

  • HTML / CSS / JS

About a code

Glassmorphism

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: vanilla-tilt.js

Demo image: Simple Pagination Design Using Glassmorphism Effect

Author

  • FullyworldWebTutorials

Made with

  • HTML / CSS

About a code

Simple Pagination Design Using Glassmorphism Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jack Ellis

Made with

  • HTML / CSS (SCSS) / JS

About a code

Glassmorph JS Calculator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: vanilla-tilt.js

Demo image: Glassmorphism Credit/Debit Card

Author

  • Shounak

Made with

  • HTML / CSS

About a code

Glassmorphism Credit/Debit Card

An aesthetic, bank card design with pure CSS, based on glassmorphism.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Glassmorphic Sign in Form

Author

  • Shounak

Made with

  • HTML / CSS (SCSS)

About a code

Glassmorphic Sign in Form

A simple, easy sign in / log in form made with pure CSS, based on glassmorphism.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • jSpilka95

Made with

  • HTML / CSS

About a code

Glassmorphism Animated

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Glassmorphism Card Hover Effects

Author

  • Luisoms

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Glassmorphism Card Hover Effects

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Tom Miller

Made with

  • HTML / CSS / JS

About a code

Glass Card with SVG + GSAP

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js

Demo image: Glassmorphism

Author

  • Vihanga nivarthana

Made with

  • HTML / CSS

About a code

Glassmorphism

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Glassmorphism

Author

  • Albert

Made with

  • HTML / CSS

About a code

Glassmorphism

A simple example of glassmorphism design trend in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Simone Bernabè

Made with

  • HTML / CSS (SCSS)

About a code

Microsoft Fluent Material

The new Microsoft Fluent design, with his layer.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -