30+ CSS Glassmorphism Effects

Last Updated on by in CSS Examples
CSS Glassmorphism Effects

Welcome to our site! We’re excited to share the latest collection of CSS Glassmorphism effects. These visually stunning effects pave the way for adding blurry effects to web projects, resulting in immersive user experiences.

Glassmorphism is a modern, viral design trend in user interface (UI) and graphic design industry, used for giving frosted, blurred, glass-like effect to web elements. It involves using blurred backgrounds, semi-transparent panels, and soft shadows, implements the sense of transparency, exhibits the beauty of frosted-glass look.

Web and UI designers can use Glassmorphism effects for fast-loading animations, attractive buttons, overlays, backgrounds, and UI cards. It’s an elegant design approach for uplifting the visual appearance of digital interfaces, sourced from reputable online sources such as CodePen and GitHub.

Let’s embark on a journey to explore the free HTML and CSS Glassmorphism code examples.

01. Glassmorphism: Simple Card UI

See the Pen
Glassmorphism: Simple Card UI
by Rahul (@_rahul)
on CodePen.


Author: Rahul @_rahul
Links: Source Code / Demo
Created on: March 28, 2022
Made with: HTML, CSS, SCSS

02. Glassmorphism Button

See the Pen
Glassmorphism Button
by Johan Fanizzi (@johanfanizzi)
on CodePen.

Author: Johan Fanizzi @johanfanizzi
Links: Source Code / Demo
Created on: February 15, 2021
Made with: HTML, CSS

03. Glassmorphism

See the Pen
Glassmorphism
by Jayasree (@Jayasree_0708)
on CodePen.

Author: Jayasree @Jayasree_0708
Links: Source Code / Demo
Created on: December 15, 2020
Made with: HTML, CSS, JS

04. Feedback Modal Design

See the Pen
Feedback Modal Design
by Rizky Firman Syah (@RizkyFirman)
on CodePen.

Author: Rizky Firman Syah @RizkyFirman
Links: Source Code / Demo
Created on: January 14, 2021
Made with: HTML, CSS, JS

05. Glassmorphism Animated

See the Pen
Glassmorphism Animated
by jSpilka95 (@jspilka95)
on CodePen.

Author: jSpilka95 @jspilka95
Links: Source Code / Demo
Created on: December 09, 2020
Made with: HTML, CSS

06. Glassmorphism Vs. Neumorphism Cards

See the Pen
Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt
by Quentin Feret (@quentin-feret)
on CodePen.

Author: Quentin Feret @quentin-feret
Links: Source Code / Demo
Created on: December 22, 2020
Made with: HTML, CSS, JS

07. Glassmorphism Credit Card

See the Pen
Glassmorphism Credit Card
by ron (@ronkeee)
on CodePen.


Author: ron @ronkeee
Links: Source Code / Demo
Created on: January 18, 2021
Made with: HTML, CSS, JS

08. Product Glassmorph

See the Pen
[WIP] Product Glassmorph
by Alex (@alexkleinubing)
on CodePen.

Author: Alex @alexkleinubing
Links: Source Code / Demo
Created on: February 01, 2021
Made with: HTML, CSS, SCSS

09. HTML only glassmorphism components by Master Styles

See the Pen
HTML only glassmorphism components by Master Styles
by Aron (@aron-tw)
on CodePen.

Author: Aron @aron-tw
Links: Source Code / Demo
Created on: January 31, 2022
Made with: HTML

10. Blob Animation And Glassmorphism with CSS

See the Pen
Blob Animation And Glassmorphism with CSS
by TheDevEnv (@thedevenv)
on CodePen.

Author: TheDevEnv @thedevenv
Links: Source Code / Demo
Created on: December 8, 2021
Made with: HTML, CSS

11. Tab-bar (Glassmorphism Effect)

See the Pen
Tab-bar (Glassmorphism Effect)
by Saba Alikhani (@fydsa)
on CodePen.


Author: Saba Alikhani @fydsa
Links: Source Code / Demo
Created on: September 19, 2021
Made with: HTML, CSS, JS

12. CSS Only Frosted Glass Effect

See the Pen
CSS only frosted glass effect
by Gregg OD (@GreggOD)
on CodePen.

Author: Gregg OD @GreggOD
Links: Source Code / Demo
Created on: July 25, 2017
Made with: HTML, CSS

13. Claymorphism + Glassmorphism

See the Pen
Claymorphism + Glassmorphism
by MOZZARELLA (@TheMOZZARELLA)
on CodePen.


Author: mozzarella @TheMOZZARELLA
Links: Source Code / Demo
Created on: January 05, 2022
Made with: HTML, CSS

14. Glassmorphism Creative Cloud App Redesign

See the Pen
Glassmorphism Creative Cloud App Redesign
by Aysenur Turk (@TurkAysenur)
on CodePen.

Author: Aysenur Turk @TurkAysenur
Links: Source Code / Demo
Created on: January 03, 2021
Made with: HTML, CSS, SCSS, JS

15. Frosted Glass Quote

See the Pen
Frosted Glass Quote
by Joni Trythall (@jonitrythall)
on CodePen.


Author: Joni Trythall @jonitrythall
Links: Source Code / Demo
Created on: July 03, 2015
Made with: HTML, CSS, SCSS

16. Glassmorphism Clock

See the Pen
Glassmorphism Clock
by Coding Artist (@Coding-Artist)
on CodePen.

Author: Coding Artist @Coding-Artist
Links: Source Code / Demo
Created on: January 19, 2021
Made with: HTML, CSS, JS

17. Social Icon Glassmorph

See the Pen
Social Icon Glassmorph
by Alex (@alexkleinubing)
on CodePen.

Author: Alex @alexkleinubing
Links: Source Code / Demo
Created on: January 28, 2021
Made with: HTML, CSS, SCSS

18. The Circle (Netflix) UI

See the Pen
The Circle (Netflix) UI
by Hyperplexed (@Hyperplexed)
on CodePen.

Author: Hyperplexed
Links: Source Code / Demo
Created on: May 26, 2022
Made with: HTML, CSS

19. Glassmorphism

See the Pen
Glassmorphism
by Albert (@walickialbert)
on CodePen.

Author: Albert @walickialbert
Links: Source Code / Demo
Created on: November 23, 2020
Made with: HTML, CSS

20. App Menu With Lock Screen

See the Pen
App Menu With Lock Screen
by Hyperplexed (@Hyperplexed)
on CodePen.


Author: Hyperplexed
Links: Source Code / Demo
Created on: March 22, 2022
Made with: HTML, CSS,SCSS, JS(TypeScript)

21. CSS Glass Reflection Effect

See the Pen
CSS Glass Reflection Effect
by Dovydas (@dovydas)
on CodePen.

Author: Dovydas @dovydas
Links: Source Code / Demo
Created on: January 21, 2017
Made with: HTML, CSS, SCSS, JS

22. Menu with Glassmorphism Effect

See the Pen
Menu with glassmorphism effect
by Lucas Fernando (@lucasfernandodev)
on CodePen.

Author: Lucas Fernando @lucasfernandodev
Links: Source Code / Demo
Created on: March 28, 2022
Made with: HTML, CSS, JS

23. Glassmorph JS Calculator

See the Pen
Glassmorph JS Calculator
by Jack Ellis (@opeala</a >)
on
CodePen.

Author: Jack Ellis @opeala
Links: Source Code / Demo
Created on: December 14, 2020
Made with: HTML, CSS, SCSS, JS

24. CSS Glassmorphism Card Hover Effects

See the Pen
CSS Glassmorphism Card Hover Effects
by Luisoms (@luisoms)
on CodePen.

Author: Luisoms @luisoms
Links: Source Code / Demo
Created on: December 10, 2020
Made with: HTML, CSS, SCSS

25. Glassmorphic Sign in Form

See the Pen
Glassmorphic Sign in Form
by Shounak (@dasshounak)
on CodePen.


Author: Shounak @dasshounak
Links: Source Code / Demo
Created on: December 10, 2020
Made with: HTML, CSS

26. Simple Glassmorphism Light and Dark

See the Pen
Simple Glassmorphism Light and Dark
by Cristiano Luis (@Cristiano123)
on CodePen.

Author: Cristiano Luis @Cristiano123
Links: Source Code / Demo
Created on: December 09, 2020
Made with: HTML, CSS, SCSS

27. NFT Card Component

See the Pen
NFT Card Component
by kiberbash (@kiberbash)
on CodePen.

Author: kiberbash @kiberbash
Links: Source Code / Demo
Created on: December 15, 2021
Made with: HTML, CSS, SCSS

28. Glassmorphism Calculator UI

See the Pen
Glassmorphism Calculator UI
by Tirso Lecointere (@tirsolecointere)
on CodePen.


Author: Tirso Lecointere @tirsolecointere
Links: Source Code / Demo
Created on: July 29, 2021
Made with: HTML, CSS, SCSS, JS

29. MacOS App Store Glassmorphism

See the Pen
MacOS App Store Glassmorphism
by Aviral (@Aviral_Coder)
on CodePen.

Author: Aviral @Aviral_Coder
Links: Source Code / Demo
Created on: June 9, 2021
Made with: HTML, CSS, SCSS

30. Glassmorphism loader

See the Pen
Glassmorphism loader
by shawn (@melzshawn1998)
on CodePen.

Author: shawn @melzshawn1998
Links: Source Code / Demo
Created on: June 30, 2021
Made with: HTML, CSS

31. Jelly Card Glassmorphism – Bootstrap 5

See the Pen
Jelly Card Glassmorphism – Bootstrap 5
by JellyPir.@t Coding (@psyloute)
on CodePen.


Author: JellyPir.@t Coding @psyloute
Links: Source Code / Demo
Created on: July 27, 2021
Made with: HTML, CSS

32. CSS – Frosted Glass

See the Pen
CSS – Frosted Glass
by Kyle Wetton (@kylewetton)
on CodePen.


Author:Kyle Wetton @kylewetton
Links: Source Code / Demo
Created on: September 06, 2019
Made with: HTML, CSS, SCSS

If you want to know more about Glassmorphism, make sure to check a great article written by Ijelekhai Faith Olohijere.

❤️ Checkout Popular CSS Collection

Digamber - Author positronX.io

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.