Collection of free HTML and CSS glassmorphism effect code examples from Codepen, Github and other resources. Update of January 2022 collection. 16 new items.
- CSS Neumorphism
About a code
CSS Glassmorphism Button Hover Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorphism Icon Buttons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorphism: Simple Card UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
About a code
HTML Only Glassmorphism Components
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Claymorphism + Glassmorphism
Card combining Claymorphism and Glassmorphism.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
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: –
About a code
Blob Animation And Glassmorphism with CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
About a code
Weather (Glassmorphism UI)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Tab-Bar Glassmorphism Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorphism Calculator UI
Glassmorphism calculator UI with dark mode.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Jelly Card Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css, font-awesome.css
About a code
Glassmorphism Loader
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
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: –
About a code
MacOS App Store Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
About a code
Glassmorphism Side Navbar With HTML & CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: line-awesome.css
About a code
Glowing Gradient Glassmorphism Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
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
About a code
Product Glassmorph
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Social Icon Glassmorph
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
About a code
Glassmorphism Clock
Glassmorphism UI analog clock.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorphism Credit Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
About a code
Feedback Modal Design
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
About a code
Glassmorphism Creative Cloud App Redesign
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: jquery.js
About a code
Glassmorphism vs Neumorphism Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css, vanilla-tilt.js
About a code
Glassmorphism UI Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorphism and Nav Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: vanilla-tilt.js
About a code
Simple Pagination Design Using Glassmorphism Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Glassmorph JS Calculator
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: vanilla-tilt.js
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: –
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: –
About a code
Glassmorphism Animated
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
About a code
CSS Glassmorphism Card Hover Effects
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
About a code
Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
GlassMorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: vanilla-tilt.js
About a code
Glass Card with SVG + GSAP
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js
About a code
Glassmorphism
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: –
About a code
Glassmorphism
A simple example of glassmorphism design trend in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –
About a code
Microsoft Fluent Material
The new Microsoft Fluent design, with his layer.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: –