Collection of free HTML and CSS glassmorphism effect code examples from Codepen, Github and other resources. Update of January 2022 collection. 16 new items.

Related Articles

  1. CSS Neumorphism

Author

  • Katarzyna Marta Kuich

Made with

  • HTML / CSS

About a code

CSS Glassmorphism Button Hover Effects

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

Responsive: no

Dependencies: -

Author

  • Taylon, Chan

Made with

  • HTML / CSS (SCSS)

About a code

Glassmorphism Icon Buttons

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

Responsive: no

Dependencies: -

Demo image: Glassmorphism: Simple Card UI

Author

  • Rahul

Made with

  • HTML / CSS (SCSS)

About a code

Glassmorphism: Simple Card UI

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

Responsive: yes

Dependencies: -

Demo image: HTML Only Glassmorphism Components

Author

  • Aron

Made with

  • HTML

About a code

HTML Only Glassmorphism Components

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

Responsive: no

Dependencies: -

Demo image: Claymorphism + Glassmorphism

Author

  • MOZZARELLA

Made with

  • HTML / CSS

About a code

Claymorphism + Glassmorphism

Card combining Claymorphism and Glassmorphism.

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

Responsive: no

Dependencies: -

Author

  • kiberbash

Made with

  • HTML / CSS (SCSS)

About a code

NFT Card Component

NFT card component with Glassmorphism and highlighted hover transition.

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

Responsive: yes

Dependencies: -

Author

  • TheDevEnv

Made with

  • HTML / CSS

About a code

Blob Animation And Glassmorphism with CSS

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

Responsive: yes

Dependencies: -

Demo image: Weather (Glassmorphism UI)

Author

  • Su Thae Thae Po

Made with

  • HTML / CSS

About a code

Weather (Glassmorphism UI)

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

Responsive: no

Dependencies: -

Author

  • Saba Alikhani

Made with

  • HTML / CSS / JS

About a code

Tab-Bar Glassmorphism Effect

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

Responsive: no

Dependencies: -

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

  • JellyPir.@t Coding

Made with

  • HTML / CSS

About a code

Jelly Card Glassmorphism

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

Responsive: yes

Dependencies: bootstrap.css, font-awesome.css

Author

  • shawn

Made with

  • HTML / CSS

About a code

Glassmorphism Loader

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

Responsive: no

Dependencies: -

Demo image: Glassmorphism Clock

Author

  • Coding Artist

Made with

  • HTML / CSS / JS

About a code

Glassmorphism Clock

A digital clock create with Glassmorphism UI using vanilla JavaScript.

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

Responsive: no

Dependencies: -

Demo image: MacOS App Store Glassmorphism

Author

  • Aviral

Made with

  • HTML / CSS (SCSS) / JS

About a code

MacOS App Store Glassmorphism

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

Responsive: yes

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

Demo image: Glassmorphism UI Card

Author

  • Coding Artist

Made with

  • HTML / CSS

About a code

Glassmorphism UI Card

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

Responsive: no

Dependencies: -

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

Demo image: Glassmorphism

Author

  • Sambat

Made with

  • HTML / CSS / JS

About a code

Glassmorphism

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

Responsive: no

Dependencies: -

Author

  • Gutu Galuppo

Made with

  • HTML / CSS / JS

About a code

GlassMorphism

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

Responsive: no

Dependencies: vanilla-tilt.js

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: -