70+ CSS Modal Windows - Free Code + Demos

Collection of 70+ CSS Modal Windows. All items are 100% free and open-source.

1. Css Only Toggle

CSS Modal Windows - Css Only toggle
Author: Lasse Diercks (lassediercks)
Created on: January 26, 2019
Made with: HTML, SCSS

2. Material UI Popup

CSS Modal Windows - Material UI popup
Easing is not easy! However, with the right easing from the Material Design guidelines, you get punchy and snappy animations.
Author: Mikael Ainalem (ainalem)
Created on: November 27, 2018
Made with: HTML, CSS
Tags: material design, popup, material ui, material, easing

3. Super Simple Easy Modal /w ES6

CSS Modal Windows - Super Simple Easy Modal /w ES6
Author: Joshua Ward (joshuaward)
Created on: January 9, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

4. Login Modal

CSS Modal Windows - login modal
Author: Mert Cukuren (knyttneve)
Created on: October 1, 2018
Made with: HTML, SCSS, Babel
Tags: modal, login, register, form

5. Rémi's Pop-up

CSS Modal Windows - rémi's pop-up
Html integration of rémi's pop-up https://twitter.com/sandwich_cool/status/1031573773294682112
Author: Thibaud Goiffon (Gthibaud)
Created on: September 1, 2018
Made with: HTML, CSS

6. Pop-up Design

CSS Modal Windows - Pop-up design
Author: fajjet (fajjet)
Created on: March 15, 2018
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css, html, design, animation, pop-up

7. Folding Modal

CSS Modal Windows - Folding Modal
Author: Blake Bowen (osublake)
Created on: February 26, 2018
Made with: HTML, SCSS, JS

8. Pure Css Popup

CSS Modal Windows - Pure Css Popup
Author: Erdem Uslu (erdemuslu)
Created on: January 28, 2018
Made with: HTML, SCSS

9. Super Simple Easy Modal /w ES6

CSS Modal Windows - Super Simple Easy Modal /w ES6
Author: Joshua Ward (joshuaward)
Created on: January 9, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

10. CSS Animation For Opening A Popup

CSS Modal Windows - CSS Animation For Opening A Popup
Author: Stas Melnikov (melnik909)
Created on: September 3, 2017
Made with: HTML, CSS
Tags: css, animation, popup

11. PopUp Overlay Animation

CSS Modal Windows - PopUp overlay animation
popup overlay using html and css and javascript
Author: Chouaib Belagoun (elmanifico45)
Created on: August 11, 2017
Made with: HTML, CSS, Babel
Tags: popup, animation, overlay

12. Animate Modal Out From Trigger

CSS Modal Windows - Animate modal out from trigger
Author: Popmotion (popmotion)
Created on: July 28, 2017
Made with: HTML, SCSS, Babel

13. Super Easy Totally Cool Modal | CSS Only

CSS Modal Windows - Super Easy Totally Cool Modal | CSS Only
CSS only content modal. No JavaScript required.
Author: Joshua Ward (joshua_ward)
Created on: July 12, 2017
Made with: HTML, SCSS, JS

14. Move Modal In On Path

CSS Modal Windows - Move Modal In on Path
Author: Chris Coyier (chriscoyier)
Created on: June 11, 2017
Made with: HTML, SCSS, JS

15. Boardal — An Onboarding Modal With Vue.js

CSS Modal Windows - Boardal — An Onboarding Modal with Vue.js
Step through on-boarding (or whatever, really) screens in a modal horizontally or vertically.
Author: Jase (jasesmith)
Created on: May 10, 2017
Made with: HTML, SCSS, JS
Tags: vuejs, components, ui | ux, css-variables, proof-of-concept

16. Popup / Overlay Grid Modal

CSS Modal Windows - Popup / Overlay Grid Modal
Author: Fabio Ottaviani (supah)
Created on: March 2, 2016
Made with: HTML, SCSS, JS
Tags: dailyui, popup, overlay, gallery, fancybox

17. React Modal Ui

CSS Modal Windows - React Modal Ui
Author: Mike (mike-grifin)
Created on: September 6, 2016
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: react, modal, ui, uidesign

18. HTML5 Dialog Element

CSS Modal Windows - HTML5 Dialog element
Messing around with HTML5's dialog element
Author: andreas jv (ajv)
Created on: November 3, 2016
Made with: HTML, SCSS, JS

19. JQuery | Simple Modal Box Snippet

CSS Modal Windows - jQuery | Simple Modal Box Snippet
Author: Tobias Bogliolo (tobiasdev)
Created on: September 13, 2016
Made with: HTML, CSS, JS
Tags: css, jquery, modal, popup, snippet

20. Shifting Material Button Modal

CSS Modal Windows - Shifting Material Button Modal
Two call-to-action buttons that give context to your modals in a Material Design fashion.
Author: Ettrics (ettrics)
Created on: March 18, 2015
Made with: HTML, SCSS, JS
Tags: modal, button, material design, animation, css

21. Responsive Modal Design

CSS Modal Windows - Responsive Modal Design
Material Design inspired modals. No jQuery required. Responsive. Read the how to on Ettrics.com
Author: Ettrics (ettrics)
Created on: April 21, 2015
Made with: HTML, Stylus, JS
Tags: modal, material design, button, responsive, animation

22. ModalX Animated Modal

CSS Modal Windows - ModalX Animated Modal
Modal animated ModalX
Author: Christopher Bicudo (D3V1L)
Created on: July 27, 2016
Made with: HTML, CSS, JS
Tags: modal, modalx, modal-animated, popup, popup-animated

23. Flat Modal Window

CSS Modal Windows - Flat Modal Window
Author: Dronca Raul (rauldronca)
Created on: July 7, 2016
Made with: HTML, CSS, JS
Tags: html, css, js, flat, animation

24. Responsive Modal

CSS Modal Windows - Responsive Modal
Author: Nainoa Shizuru (nainoashizuru)
Created on: February 1, 2015
Made with: HTML, SCSS, JS
Tags: modal, responsive-modal, simple modal, transition

25. Simplistic Dialog

CSS Modal Windows - Simplistic Dialog
Author: Tristan White (triss90)
Created on: June 19, 2016
Made with: HTML, SCSS, JS

26. No JS Modal Popup Window

CSS Modal Windows - No JS modal popup window
Using the ol' label, checkbox trick to launch a modal window. All CSS. No JavaScript required.
Author: David Conner (davidicus)
Created on: March 4, 2015
Made with: HTML, SCSS, JS
Tags: no-js, css, modal, css-modal

27. Another Modal Box - Zzz

CSS Modal Windows - Another Modal Box - Zzz
Yet another modal box! Yippee! Use it if you want.
Author: Fox (wintr)
Created on: June 29, 2016
Made with: HTML, SCSS, JS
Tags: modal, css, jquery, fadein

28. CSS Only Modal

CSS Modal Windows - CSS only modal
A challenge to create a confirm modal without any JavaScript. Probably not usable in production, but still it works.
Author: Kristoffer Östlund (kristofferostlund)
Created on: March 31, 2016
Made with: HTML, SCSS, JS
Tags: modal no-script css-only

29. Flappy Dialog

CSS Modal Windows - Flappy Dialog
Author: Alex (akwright)
Created on: February 25, 2015
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: flap, perspective, transform, js, rotate

30. Modal With Clip-path

CSS Modal Windows - Modal with clip-path
Modal that animate opens with animation clip-path. Observe clip-path aren't hardware accelerated or works in IE anything.
Author: Jonas Sandstedt (sandstedt)
Created on: April 9, 2016
Made with: HTML, SCSS, JS
Tags: modal, clip-path, animation, material design, button

31. Morphing Modal Window

CSS Modal Windows - Morphing Modal Window
A call-to-action button that animates and turns into a full-size modal window. The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.js. Tutorial & Download on CodyHouse: http://codyhouse.co/gem/morphing-modal-window/
Author: CodyHouse (codyhouse)
Created on: March 12, 2015
Made with: HTML, SCSS, JS
Tags: modal, morphing, window, tooltip, message

32. Morph Button To Modal React

CSS Modal Windows - Morph Button to Modal React
Author: toastal (toastal)
Created on: February 9, 2016
Made with: Pug, Sass, LiveScript
CSS Pre-processor: Sass
JS Pre-processor: LiveScript
HTML Pre-processor: Pug
Tags: react

33. Modal Popup

CSS Modal Windows - Modal Popup
Author: Nastasia (nastasia)
Created on: March 23, 2016
Made with: HTML, SCSS, JS
Tags: modal, popup, animation

34. Origami Dialog Effect

CSS Modal Windows - Origami Dialog Effect
The idea is to replace the path of the button container into origami path step by step. Enjoy!
Author: Bhakti Pasaribu (balapa)
Created on: October 26, 2015
Made with: HTML, SCSS, JS
Tags: svg, origami, origami effect, animation

35. Modal Interaction With Genie Effect

CSS Modal Windows - Modal Interaction with Genie Effect
Inspired by Mac OS X minimize interaction. Built with SVG and Greensock Plugin.
Author: Bhakti Pasaribu (balapa)
Created on: January 20, 2016
Made with: HTML, SCSS, JS
Tags: svg, modal, interaction, animation, greensock

36. Simple, Flexible, And Responsive Flexbox-based Modal

CSS Modal Windows - Simple, flexible, and responsive flexbox-based modal
Flexbox modal example. It's responsive, easy to integrate and extend, and passes content and values via data-attributes. Was looking for a simple approach that was not reliant on any library. Straight CSS/jQuery. Enjoy :)
Author: Bryan Chalker (bchalker)
Created on: March 1, 2016
Made with: HTML, SCSS, JS
Tags: flexbox, modal, data-attribute, flex, slim modal

37. Animated Modal Box

CSS Modal Windows - Animated Modal Box
Author: lefoy (lefoy)
Created on: July 10, 2015
Made with: HTML, SCSS, JS
Tags: modal, box, animated

38. Modal Dialog

CSS Modal Windows - Modal Dialog
Simple modal window equipped with smooth CSS3 transitions. Commonly used for viewing annoyingly important content upon visiting a website.
Author: David Fitas (dfitzy)
Created on: January 12, 2016
Made with: HTML, CSS, JS
Tags: modal, dialog, window, popup, notification

39. Modal Animation

CSS Modal Windows - Modal animation
This looked a lot better in my head. At 3am.
Author: Giana (giana)
Created on: January 15, 2016
Made with: HTML, SCSS, JS
Tags: modal, css, animation, ui, ugh

40. 3D Dialog

CSS Modal Windows - 3D dialog
Author: Geza Dombi (gezadombi)
Created on: April 8, 2015
Made with: HTML, Sass, JS

41. Basic CSS-Only Modal

CSS Modal Windows - Basic CSS-Only Modal
Author: Timothy Long (timothylong)
Created on: December 18, 2013
Made with: HTML, SCSS
Tags: css3, modal, popup, flat, basic

42. Modal Window Destroy Concept

CSS Modal Windows - Modal window destroy concept
Author: LegoMushroom (sol0mka)
Created on: December 30, 2014
Made with: HTML, Stylus, CoffeeScript
Tags: modal, blow, svg, canvas, uiux

43. Prompt Dialog With Background Blur

CSS Modal Windows - Prompt Dialog with background blur
Purely css-driven popup dialog with a soothing transition animation and background blur
Author: Tuomas Hatakka (ndne)
Created on: September 27, 2015
Made with: HTML, CSS, JS
Tags: dialog, blur, animation, ui, modal

44. Modal

CSS Modal Windows - Modal
Author: Philipp Rappold (rppld)
Created on: August 2, 2015
Made with: HTML, SCSS, JS
Tags: modal

45. Pure CSS Modal

CSS Modal Windows - Pure CSS Modal
Essentially, I am using the input's checked pseudo class to manipulate the styles of the modal and label using sibling selectors.
Author: Mark Holmes (SMLMRKHLMS)
Created on: June 25, 2015
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, modal, pure-css, sass

46. Pure CSS Modal + Slider

CSS Modal Windows - Pure CSS Modal + Slider
Responsive modal dialog using css only, including sliding/carousel content inside the modal.
Author: Marvin Orendain (marv117)
Created on: June 19, 2015
Made with: HTML, Less
Tags: pure-css, css, modal, slider, carousel

47. Morphing Modal Window

CSS Modal Windows - Morphing Modal Window
A call-to-action button that animates and turns into a full-size modal window. The final result is powered by a combination of CSS transition and transformations, jQuery and Velocity.js. Tutorial & Download on CodyHouse: http://codyhouse.co/gem/morphing-modal-window/
Author: CodyHouse (codyhouse)
Created on: March 12, 2015
Made with: HTML, SCSS, JS
Tags: modal, morphing, window, tooltip, message

48. Modal Animation Physics

CSS Modal Windows - Modal Animation Physics
Messing around with keyframe/transition physics for a modal. Mostly focused on the timing between the overlay, modal container, and modal content to try to make the whole event look more organic. Believe it or not, inspired by the menu pop-ups in Super Mario 3D. Enjoy
Author: Tey Tag (koolhaus)
Created on: October 9, 2014
Made with: HTML, SCSS, JS
Tags: modal, animation, css3, popup, keyframes

49. Swing Out Modal

CSS Modal Windows - Swing Out Modal
Fun little modal concept I made to practice with keyframes and implied depth. Hope to implement this in a project at some point.
Author: Michael Smith (MichaelRyanSmith)
Created on: February 16, 2015
Made with: HTML, SCSS, JS
Tags: modal animation css ui interactive

50. Push Modal Idea

CSS Modal Windows - Push Modal Idea
Neat little way to give your page some depth
Author: Short (short)
Created on: February 4, 2015
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: modal, pure-css, design, test, depth

51. Pop-up With Blurred Background Animation

CSS Modal Windows - Pop-up with blurred background animation
Here's a popup that appears while blurring out the body underneath. click the 'X' close on the popup and the blur transition back while the popup fades off. Suitable for sites that may want a nag (perhaps for donation or subscription services) or could be re-purposed as a general modal or...
Read More
Author: Benjamin Dalton (jaeming)
Created on: September 18, 2014
Made with: HTML, CSS, JS

52. Simple Dialog Effects

CSS Modal Windows - Simple dialog effects
Author: dodozhang21 (dodozhang21)
Created on: December 29, 2014
Made with: HTML, SCSS, JS

53. CSS Only Line Animated Modal

CSS Modal Windows - CSS Only Line Animated Modal
Modal draws then fades in using SVG & CSS Animation
Author: Tom (TomJ1588)
Created on: December 10, 2014
Made with: HTML, CSS

54. Pure CSS Animated Modals

CSS Modal Windows - Pure CSS Animated Modals
Animated Slide down modal with browser back support. no JS Animated Slide down modal with tabs. no JS
Author: Tom (TomJ1588)
Created on: December 1, 2014
Made with: HTML, CSS
Tags: css, animated, modal, no-js

55. Draggable Translucent Modal

CSS Modal Windows - Draggable Translucent Modal
Building off of a translucency exercise that I completed a few days ago. This one is even more fun!
Author: Jesse Couch (designcouch)
Created on: September 24, 2014
Made with: HTML, SCSS, JS

56. Simple Confirmation Popup

CSS Modal Windows - Simple Confirmation Popup
Simple responsive confirmation dialog box, with a subtle CSS3 entry animation. http://codyhouse.co/gem/simple-confirmation-popup/
Author: Adventures in Missions (adventuresinmissions)
Created on: July 2, 2014
Made with: HTML, CSS, JS
Tags: popup

57. CSS Modal

CSS Modal Windows - CSS Modal
Based on: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Author: Pete Nawara (petebot)
Created on: October 3, 2012
Made with: HTML, Less, JS
Tags: css, modal, dialog

58. CSS Modal With Overlay

CSS Modal Windows - CSS Modal with Overlay
jquery just to add class, not required. not using bootstrap at all
Author: Nodws (nodws)
Created on: May 27, 2014
Made with: HTML, CSS, JS
Tags: css, jquery, bootstrap, overlay

59. Pure Css Popup Box

CSS Modal Windows - Pure css popup box
Author: Prakash (imprakash)
Made with: HTML, CSS

60. Pure CSS Modal

CSS Modal Windows - Pure CSS modal
Author: Austin Lord (ohnoitsaustin)
Created on: July 26, 2015
Made with: HTML, SCSS

61. Pure CSS Modal Box

CSS Modal Windows - Pure CSS modal box
I'm using labels as a triggers for checkbox which state indicates visibility of modal box.
Author: Kasper Mikiewicz (Idered)
Created on: September 30, 2013
Made with: HTML, CSS
Tags: modal, dialog, lightbox

62. Animated Modal

CSS Modal Windows - Animated Modal
Author: Emre Süslü (devEmre)
Created on: July 16, 2020
Made with: HTML, SCSS, JS
Tags: modal, animation, sass

63. CSS Modal Window Animation

CSS Modal Windows - CSS Modal Window Animation
Author: Caroline Russo (carolinerusso)
Made with: HTML, SCSS

64. Pure CSS Modal

CSS Modal Windows - Pure CSS Modal
Author: Ivan Grozdic (ig_design)
Made with: HTML, CSS, JS

65. Modals Menu

CSS Modal Windows - Modals Menu
Author: Zarko Rvovic (nocni_sovac)
Created on: June 30, 2020
Made with: HTML, SCSS, JS
Tags: modal, menu, css, javascript

66. Overlay With Background Blur

CSS Modal Windows - Overlay with background blur
Adding an additional blur to the background content when opening an overlay. The blur is not animated, which doesn't seem necessary when the additional overlay and modal are. The blur is achieved with an SVG filter, rather than a CSS filter, for better support across browsers.
Author: aepicos (aepicos)
Created on: June 23, 2020
Made with: HTML, SCSS
Tags: svg-filter, blur, modal

67. Fading Modal

CSS Modal Windows - Fading Modal
Animates opacity and visibility to make a modal fade out and then truly get out of the way. Read more: The Surprising Things That CSS Can Animate
Author: Will Boyd (lonekorean)
Created on: June 8, 2020
Made with: HTML, CSS
Tags: animation, modal, fade, visibility