45+ CSS Glassmorphism Effects

Last Updated on by in CSS Examples
CSS Glassmorphism Effect

Are you looking for a collection of 45+ CSS glassmorphism effects that mimic the appearance of frosted glass with a blurred, semi-transparent effect, you’ve stumbled upon the ideal spot.

In April 2024, we introduced over 15 new glassmorphism design effects to better cater to your design requirements. Be sure to explore them!

In this post, we are featuring the latest collection of free HTML and CSS glassmorphism effects that you can use to amplify the beauty of your web projects. We’ve gathered these glassmorphism code examples from reputable platforms such as CodePen, GitHub, and many more.

CSS glassmorphism is a modern design technique mainly used by web designers and developers for adding transparency, blur, texture, and lighting effects to modern user interfaces and graphics. In our collection, each glassmorphism example is carefully selected, enabling you to create visually striking web projects offering engaging and immersive experiences to users.

If you are an expert who is seeking to incorporate blurred backgrounds, semi-transparent panels, soft shadows, or a beginner who wants just a design reference of CSS glassmorphism effects that bestow fast-loading animations, attractive and interactive buttons, overlays, backgrounds, and UI cards,.

Our hand-picked compilation of CSS glassmorphism examples has something for everyone. We help you create dynamic and visually appealing layouts that capture the attention of your site audience while also keeping your project ahead of design trends.

Our glassmorphism code snippets are easy to customize, letting you change the colors and style of glassmorphism effects with a little knowledge of HTML, CSS, and JavaScript. Not only that, but almost all of our glassmorphism examples are responsive, ensuring browser compatibility across all major browsers.

Feel free to explore our collection of CSS glassmorphism effects and add depth and dimensionality to your web and mobile applications.

01. Glassmorphism Example

See the Pen
Glassmorphism Example
by designcourse (@designcourse)
on CodePen.


Author: designcourse @designcourse
Links: Source Code / Demo
Created on: December 7, 2020
Made with: HTML, CSS, SCSS, JS

02. Glassmorphism

See the Pen
Glassmorphism
by Yudiz Solutions Limited (@yudizsolutions)
on CodePen.


Author: Yudiz Solutions Limited @yudizsolutions
Links: Source Code / Demo
Created on: March 4, 2021
Made with: HTML, CSS, JS

03. Glowing Gradient Glassmorphism Card

See the Pen
Glowing Gradient Glassmorphism Card
by Kodplay (@kodplay)
on CodePen.


Author: Kodplay @kodplay
Links: Source Code / Demo
Created on: May 1, 2021
Made with: HTML, CSS

04. Glassmorphism vs Neumorphism Clock | Css, JS & Vanilla Tilt

See the Pen
Glassmorphism vs Neumorphism Clock | Css, JS & Vanilla Tilt
by Quentin Feret (@quentin-feret)
on CodePen.


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

05. Glassmorphism login Form Tutorial in html css

See the Pen
Glassmorphism login Form Tutorial in html css
by Foolish Developer (@fghty)
on CodePen.


Author: Foolish Developer @fghty
Links: Source Code / Demo
Created on: September 14, 2021
Made with: HTML, CSS

06. Glassmorphism effect

See the Pen
Glassmorphism effect
by Kristen (@kristen17)
on CodePen.


Author: Kristen @kristen17
Links: Source Code / Demo
Created on: December 16, 2020
Made with: HTML, CSS, SCSS, JS

07. Glassmorphism

See the Pen
Glassmorphism
by Vihanga nivarthana (@vihanga)
on CodePen.


Author: Vihanga nivarthana @vihanga
Links: Source Code / Demo
Created on: December 1, 2020
Made with: HTML, CSS

08. Apple pay Glassmorphism Dark and light mode

See the Pen
Apple pay Glassmorphism Dark and light mode
by Cristiano Luis (@Cristiano123)
on CodePen.


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

09. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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)

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. Glassmorphism Card UI Design @ Online Tutorials

See the Pen
Glassmorphism Card UI Design @ Online Tutorials
by Hyu Kio (@hyukio68)
on CodePen.


Author: Hyu Kio @hyukio68
Links: Source Code / Demo
Created on: December 30, 2020
Made with: HTML, CSS

42. Glassmorphic Modern Landing page with Squircle Buttons (Responsive)

See the Pen
Glassmorphic Modern Landing page with Squircle Buttons (Responsive)
by  Juxtopposed (@Juxtopposed)
on CodePen.


Author: Juxtopposed
Links: Source Code / Demo
Created on: December 5, 2023
Made with: HTML, CSS, SCSS

43. CSS Glassmorphism Button Hover Effects | Glass Morphism

See the Pen
CSS Glassmorphism Button Hover Effects | Glass Morphism
by Katarzyna Marta Kuich (@katarzynamarta)
on CodePen.


Author: Katarzyna Marta Kuich @katarzynamarta
Links: Source Code / Demo
Created on: August 25, 2022
Made with: HTML, CSS, SCSS

44. Glassmorphism: Nesting #2

See the Pen
Glassmorphism: Nesting #2
by Rahul (@_rahul)
on CodePen.


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

45. Glassmorphism Icon Buttons

See the Pen
Glassmorphism Icon Buttons
by Taylon, Chan (@tin-fung-hk)
on CodePen.


Author: Taylon, Chan @tin-fung-hk
Links: Source Code / Demo
Created on: April 23, 2022
Made with: HTML, CSS, SCSS

46. Pure CSS Glassmorphism Modal

See the Pen
Pure CSS Glassmorphism Modal
by TOMAZKI (@Podgro)
on CodePen.


Author: TOMAZKI @Podgro
Links: Source Code / Demo
Created on: March 30, 2021
Made with: HTML, CSS, SCSS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.