48+ CSS Glassmorphism Effects

Checkout this vast, 100% free collection of 48+ HTML and CSS text effect examples. Each item is designed to create visually appealing UI components.

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