Collection of free HTML and CSS movie card code examples from codepen and other resources. Update of April 2019 collection. 5 new items.
Related Articles
- CSS Cards
- CSS Blog Cards
- CSS Card Hover Effects
- CSS Card Layouts
- CSS Flip Cards
- CSS Material Design Cards
- CSS Credit Cards
- CSS Product Cards
- CSS Profile Cards
- CSS Recipe Cards
- CSS Business Cards

Links
Made with
- HTML / CSS
About a code
Netflix Inspired Movie Gallery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bulma.css

Links
Made with
- HTML / CSS
About a code
Movie Card Design Flex
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Movie Ticket Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS clip-path Card Hover Effects
CSS clip-path
card hover effects. Only using HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
Movie Card UI
Movie card UI with pulse play button in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About the code
Movie Card UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS (SCSS)
About the code
Movie Card
Responsive movie card - light version. Dark version: https://codepen.io/simoberny/pen/qxxOqj
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Movie Cards
Responsive movie cards.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Responsive Movie Card
HTML & CSS responsive movie card.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Daily UI Movie Card
Movie card in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Movie Card
Movie card in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
Movie Card Interactive UI
Movie card interactive UI with pure CSS3 animation rating.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS (SCSS)
About the code
Movie Card
Movie card with HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css