Collection of free HTML and CSS glassmorphism effect examples from Codepen and other resources.
Related Articles
Links
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: -
Links
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
Links
Made with
- HTML / CSS
About a code
Glowing Gradient Glassmorphism Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS (SCSS)
About a code
Product Glassmorph
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Social Icon Glassmorph
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS / JS
About a code
Glassmorphism Clock
Glassmorphism UI analog clock.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
Glassmorphism Credit Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js

Links
Made with
- HTML / CSS / JS
About a code
Feedback Modal Design
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: font-awesome.css

Links
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
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Glassmorphism and Nav Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: vanilla-tilt.js

Links
Made with
- HTML / CSS
About a code
Simple Pagination Design Using Glassmorphism Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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

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

Links
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: -
Links
Made with
- HTML / CSS
About a code
Glassmorphism Animated
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Links
Made with
- HTML / CSS
About a code
Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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