39 CSS Glassmorphism Effects

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