48+ CSS Glassmorphism Effects

We have curated a collection of 48+ free HTML and CSS code examples for the glassmorphism effect. These visually appealing glassmorphism effects are used in a modern web or UI design trend to mimic the appearance of frosted glass.

Each item is gathered from reliable platforms like CodePen, and GitHub. Aiming to help a variety of creative enthusiasts in the web development or design fields. Whether you’re a web designer, front-end developer, or a UI/UX designer, we have a mesmerising compilation of glassmorphism effects that you can use to uplift the user experience of your audience.

Each Glassmorphism animation in our collection is unique and stylish, offering a powerful design component to bring life and movement to your web project. You can add blurred backgrounds, transparency, light, or a frosted look to your webpage with these effects, which are easy to customize and compatible with almost all modern browsers.

Let’s checkout our top CSS Glassmorphism Effects code snippets, create visually appealing interfaces, such as dashboards, card designs, or web forms and stay ahead of design trends.

1. Glassmorphism | Login Form -> HTML & CSS

See the Pen <a href="https://codepen.io/DivineBlow/pen/bGwYYPQ"> Glassmorphism | Login Form -> HTML & CSS</a> by Sebi (<a href="https://codepen.io/DivineBlow">@DivineBlow</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sebi
Source: Code / Demo
Created on: DECEMBER 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

2. planeador-semanal-platzi

See the Pen <a href="https://codepen.io/teffcode_/pen/gOLdKpe"> planeador-semanal-platzi</a> by Estefany Aguilar (<a href="https://codepen.io/teffcode_">@teffcode_</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Estefany Aguilar
Source: Code / Demo
Created on: MARCH 7, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. Tab-bar (Glassmorphism Effect)

See the Pen <a href="https://codepen.io/fydsa/pen/VwWXdZm"> Tab-bar (Glassmorphism Effect) </a> by Saba Alikhani (<a href="https://codepen.io/fydsa">@fydsa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Saba Alikhani
Source: Code / Demo
Created on: SEPTEMBER 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Menu with Glassmorphism Effect

See the Pen <a href="https://codepen.io/lucasfernandodev/pen/BaJRvRr"> Menu with glassmorphism effect</a> by Lucas Fernando (<a href="https://codepen.io/lucasfernandodev">@lucasfernandodev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lucas Fernando
Source: Code / Demo
Created on: MARCH 28, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. CSS Glassmorphism Button Hover Effects | Glass Morphism

See the Pen <a href="https://codepen.io/katarzynamarta/pen/rNdbbVq"> CSS Glassmorphism Button Hover Effects | Glass Morphism</a> by Katarzyna Marta Kuich (<a href="https://codepen.io/katarzynamarta">@katarzynamarta</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Katarzyna Marta Kuich
Source: Code / Demo
Created on: AUGUST 25, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Glassmorph JS Calculator

See the Pen <a href="https://codepen.io/opeala/pen/yLaMBvN"> Glassmorph JS Calculator</a> by Jack Ellis (<a href="https://codepen.io/opeala">@opeala</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jack Ellis
Source: Code / Demo
Created on: DECEMBER 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS), JavaScript

7. Glassmorphism Example

See the Pen <a href="https://codepen.io/designcourse/pen/qBaNORO"> Glassmorphism Example</a> by designcourse (<a href="https://codepen.io/designcourse">@designcourse</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: designcourse
Source: Code / Demo
Created on: DECEMBER 7, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

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

See the Pen <a href="https://codepen.io/Juxtopposed/pen/mdvaezM"> Glassmorphic Modern Landing page with Squircle Buttons (Responsive)</a> by Juxtopposed (<a href="https://codepen.io/Juxtopposed">@Juxtopposed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Juxtopposed
Source: Code / Demo
Created on: DECEMBER 5, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. CSS Only Frosted Glass Effect

See the Pen <a href="https://codepen.io/GreggOD/pen/xLbboZ"> CSS only frosted glass effect</a> by Gregg OD (<a href="https://codepen.io/GreggOD">@GreggOD</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gregg OD
Source: Code / Demo
Created on: JULY 25, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. CSS Glassmorphism Card Hover Effects

See the Pen <a href="https://codepen.io/luisoms/pen/PoGGRKp"> CSS Glassmorphism Card Hover Effects</a> by Luisoms (<a href="https://codepen.io/luisoms">@luisoms</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Luisoms
Source: Code / Demo
Created on: DECEMBER 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. Glassmorphism

See the Pen <a href="https://codepen.io/yudizsolutions/pen/qBqKGgM"> Glassmorphism</a> by Yudiz Solutions Limited (<a href="https://codepen.io/yudizsolutions">@yudizsolutions</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yudiz Solutions Limited
Source: Code / Demo
Created on: MARCH 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

12. Glassmorphism: Nesting #2

See the Pen <a href="https://codepen.io/_rahul/pen/YzYQRVM"> Glassmorphism: Nesting #2</a> by Rahul (<a href="https://codepen.io/_rahul">@_rahul</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rahul
Source: Code / Demo
Created on: MARCH 29, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Claymorphism + Glassmorphism

See the Pen <a href="https://codepen.io/TheMOZZARELLA/pen/ExwRvVN"> Claymorphism + Glassmorphism</a> by MOZZARELLA (<a href="https://codepen.io/TheMOZZARELLA">@TheMOZZARELLA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mozzarella
Source: Code / Demo
Created on: JANUARY 05, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Glowing Gradient Glassmorphism Card

See the Pen <a href="https://codepen.io/kodplay/pen/oNBreRJ"> Glowing Gradient Glassmorphism Card</a> by Kodplay (<a href="https://codepen.io/kodplay">@kodplay</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kodplay
Source: Code / Demo
Created on: MAY 1, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Glassmorphic Sign in Form

See the Pen <a href="https://codepen.io/dasshounak/pen/QWKKYdj"> Glassmorphic Sign in Form</a> by Shounak (<a href="https://codepen.io/dasshounak">@dasshounak</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shounak
Source: Code / Demo
Created on: DECEMBER 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Glassmorphism Card UI Design @ Online Tutorials

See the Pen <a href="https://codepen.io/hyukio68/pen/LYRQVrg"> Glassmorphism Card UI Design @ Online Tutorials</a> by Hyu Kio (<a href="https://codepen.io/hyukio68">@hyukio68</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyu Kio
Source: Code / Demo
Created on: DECEMBER 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

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

See the Pen <a href="https://codepen.io/quentin-feret/pen/LYRyypN"> Glassmorphism vs Neumorphism Clock | Css, JS & Vanilla Tilt</a> by Quentin Feret (<a href="https://codepen.io/quentin-feret">@quentin-feret</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Quentin Feret
Source: Code / Demo
Created on: DECEMBER 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Glassmorphism Icon Buttons

See the Pen <a href="https://codepen.io/tin-fung-hk/pen/MWrRqBw"> Glassmorphism Icon Buttons</a> by Taylon, Chan (<a href="https://codepen.io/tin-fung-hk">@tin-fung-hk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Taylon, Chan
Source: Code / Demo
Created on: APRIL 23, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Glassmorphism Creative Cloud App Redesign

See the Pen <a href="https://codepen.io/TurkAysenur/pen/ZEpxeYm"> Glassmorphism Creative Cloud App Redesign</a> by Aysenur Turk (<a href="https://codepen.io/TurkAysenur">@TurkAysenur</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aysenur Turk
Source: Code / Demo
Created on: JANUARY 03, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

20. Simple Glassmorphism Light and Dark

See the Pen <a href="https://codepen.io/Cristiano123/pen/rNMMNVq"> Simple Glassmorphism Light and Dark</a> by Cristiano Luis (<a href="https://codepen.io/Cristiano123">@Cristiano123</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cristiano Luis
Source: Code / Demo
Created on: DECEMBER 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Glassmorphism login Form Tutorial in html css

See the Pen <a href="https://codepen.io/fghty/pen/PojKNEG"> Glassmorphism login Form Tutorial in html css</a> by Foolish Developer (<a href="https://codepen.io/fghty">@fghty</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Foolish Developer
Source: Code / Demo
Created on: SEPTEMBER 14, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. CSS – Frosted Glass

See the Pen <a href="https://codepen.io/kylewetton/pen/bGbaazX"> CSS – Frosted Glass</a> by Kyle Wetton (<a href="https://codepen.io/kylewetton">@kylewetton</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kyle Wetton
Source: Code / Demo
Created on: SEPTEMBER 06, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Glassmorphism Credit Card

See the Pen <a href="https://codepen.io/ronkeee/pen/KKgJmmz"> Glassmorphism Credit Card</a> by ron (<a href="https://codepen.io/ronkeee">@ronkeee</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ron
Source: Code / Demo
Created on: JANUARY 18, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

24. Frosted Glass Quote

See the Pen <a href="https://codepen.io/jonitrythall/pen/GJQBOp"> Frosted Glass Quote</a> by Joni Trythall (<a href="https://codepen.io/jonitrythall">@jonitrythall</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joni Trythall
Source: Code / Demo
Created on: JULY 03, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Glassmorphism effect

See the Pen <a href="https://codepen.io/kristen17/pen/VwKbeXL"> Glassmorphism effect</a> by Kristen (<a href="https://codepen.io/kristen17">@kristen17</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kristen
Source: Code / Demo
Created on: DECEMBER 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

26. NFT Card Component

See the Pen <a href="https://codepen.io/kiberbash/pen/MWEpevg"> NFT Card Component</a> by kiberbash (<a href="https://codepen.io/kiberbash">@kiberbash</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: kiberbash
Source: Code / Demo
Created on: DECEMBER 15, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. Glassmorphism Vs. Neumorphism Cards

See the Pen <a href="https://codepen.io/quentin-feret/pen/QWKqLPx"> Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt</a> by Quentin Feret (<a href="https://codepen.io/quentin-feret">@quentin-feret</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Quentin Feret
Source: Code / Demo
Created on: DECEMBER 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

28. Glassmorphism Clock

See the Pen <a href="https://codepen.io/Coding-Artist/pen/eYdXNvd"> Glassmorphism Clock </a> by Coding Artist (<a href="https://codepen.io/Coding-Artist">@Coding-Artist</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Coding Artist
Source: Code / Demo
Created on: JANUARY 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

29. Glassmorphism

See the Pen <a href="https://codepen.io/vihanga/pen/jOMPoQJ"> Glassmorphism</a> by Vihanga nivarthana (<a href="https://codepen.io/vihanga">@vihanga</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vihanga nivarthana
Source: Code / Demo
Created on: DECEMBER 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Blob Animation And Glassmorphism with CSS

See the Pen <a href="https://codepen.io/thedevenv/pen/JjrXayd"> Blob Animation And Glassmorphism with CSS</a> by TheDevEnv (<a href="https://codepen.io/thedevenv">@thedevenv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TheDevEnv
Source: Code / Demo
Created on: DECEMBER 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Glassmorphism Calculator UI

See the Pen <a href="https://codepen.io/tirsolecointere/pen/zYwWbWv"> Glassmorphism Calculator UI</a> by Tirso Lecointere (<a href="https://codepen.io/tirsolecointere">@tirsolecointere</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tirso Lecointere
Source: Code / Demo
Created on: JULY 29, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

32. Glassmorphism Animated

See the Pen <a href="https://codepen.io/jspilka95/pen/vYXXWOE"> Glassmorphism Animated</a> by jSpilka95 (<a href="https://codepen.io/jspilka95">@jspilka95</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: jSpilka95
Source: Code / Demo
Created on: DECEMBER 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. Social Icon Glassmorph

See the Pen <a href="https://codepen.io/alexkleinubing/pen/JjbPXrQ"> Social Icon Glassmorph</a> by Alex (<a href="https://codepen.io/alexkleinubing">@alexkleinubing</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex
Source: Code / Demo
Created on: JANUARY 28, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Apple pay Glassmorphism Dark and light mode

See the Pen <a href="https://codepen.io/Cristiano123/pen/poENVBz"> Apple pay Glassmorphism Dark and light mode</a> by Cristiano Luis (<a href="https://codepen.io/Cristiano123">@Cristiano123</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cristiano Luis
Source: Code / Demo
Created on: DECEMBER 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

35.MacOS App Store Glassmorphism

See the Pen <a href="https://codepen.io/Aviral_Coder/pen/rNyZBwX"> MacOS App Store Glassmorphism</a> by Aviral (<a href="https://codepen.io/Aviral_Coder">@Aviral_Coder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aviral
Source: Code / Demo
Created on: JUNE 9, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

36. HTML only glassmorphism components by Master Styles

See the Pen <a href="https://codepen.io/aron-tw/pen/LYOGzdY"> HTML only glassmorphism components by Master Styles</a> by Aron (<a href="https://codepen.io/aron-tw">@aron-tw</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aron
Source: Code / Demo
Created on: JANUARY 31, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. The Circle (Netflix) UI

See the Pen <a href="https://codepen.io/Hyperplexed/pen/dydJGZM"> The Circle (Netflix) UI</a> by Hyperplexed (<a href="https://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyperplexed
Source: Code / Demo
Created on: MAY 26, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. Glassmorphism: Simple Card UI

See the Pen <a href="https://codepen.io/_rahul/pen/NWXjOXW"> Glassmorphism: Simple Card UI</a> by Rahul (<a href="https://codepen.io/_rahul">@_rahul</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rahul
Source: Code / Demo
Created on: MARCH 28, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

39. Glassmorphism loader

See the Pen <a href="https://codepen.io/melzshawn1998/pen/qBmEmMG"> Glassmorphism loader</a> by shawn (<a href="https://codepen.io/melzshawn1998">@melzshawn1998</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: shawn
Source: Code / Demo
Created on: JUNE 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Glassmorphism

See the Pen <a href="https://codepen.io/walickialbert/pen/xxOvPmb"> Glassmorphism</a> by Albert (<a href="https://codepen.io/walickialbert">@walickialbert</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Albert
Source: Code / Demo
Created on: NOVEMBER 23, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. Pure CSS Glassmorphism Modal

See the Pen <a href="https://codepen.io/Podgro/pen/MWJjPgM"> Pure CSS Glassmorphism Modal</a> by TOMAZKI (<a href="https://codepen.io/Podgro">@Podgro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TOMAZKI
Source: Code / Demo
Created on: MARCH 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

42. Feedback Modal Design

See the Pen <a href="https://codepen.io/RizkyFirman/pen/KKgrZvw"> Feedback Modal Design</a> by Rizky Firman Syah (<a href="https://codepen.io/RizkyFirman">@RizkyFirman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rizky Firman Syah
Source: Code / Demo
Created on: JANUARY 14, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

43. App Menu With Lock Screen

See the Pen <a href="https://codepen.io/Hyperplexed/pen/vYpXNJd"> App Menu With Lock Screen</a> by Hyperplexed (<a href="https://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hyperplexed
Source: Code / Demo
Created on: MARCH 22, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(TypeScript)

44. Glassmorphism Button

See the Pen <a href="https://codepen.io/johanfanizzi/pen/xxRgvJX"> Glassmorphism Button</a> by Johan Fanizzi (<a href="https://codepen.io/johanfanizzi">@johanfanizzi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Johan Fanizzi
Source: Code / Demo
Created on: FEBRUARY 15, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

45. Jelly Card Glassmorphism – Bootstrap 5

See the Pen <a href="https://codepen.io/psyloute/pen/OJmQOeY"> Jelly Card Glassmorphism – Bootstrap 5</a> by JellyPir.@t Coding (<a href="https://codepen.io/psyloute">@psyloute</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JellyPir.@t Coding
Source: Code / Demo
Created on: JULY 27, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

46. Product Glassmorph

See the Pen <a href="https://codepen.io/alexkleinubing/pen/abBzMKe"> [WIP] Product Glassmorph</a> by Alex (<a href="https://codepen.io/alexkleinubing">@alexkleinubing</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex
Source: Code / Demo
Created on: FEBRUARY 01, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

47. Glassmorphism

See the Pen <a href="https://codepen.io/Jayasree_0708/pen/bGwqaXK"> Glassmorphism</a> by Jayasree (<a href="https://codepen.io/Jayasree_0708">@Jayasree_0708</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jayasree
Source: Code / Demo
Created on: DECEMBER 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

48. CSS Glass Reflection Effect

See the Pen <a href="https://codepen.io/dovydas/pen/WRpBEp"> CSS Glass Reflection Effect</a> by Dovydas (<a href="https://codepen.io/dovydas">@dovydas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dovydas
Source: Code / Demo
Created on: JANUARY 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript