21+ CSS Movie Cards

A curated collection of 21+ free HTML and CSS movie cards for web designers, web developers, and creatives around the world.

1. Deadpool Movie Card UI

See the Pen <a href="https://codepen.io/riktar/pen/mVZQKM"> Deadpool Movie Card UI</a> by Riccardo Tartaglia (<a href="https://codepen.io/riktar">@riktar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Riccardo Tartaglia
Source: Code / Demo
Created on: FEBRUARY 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Movie Card

See the Pen <a href="https://codepen.io/drehimself/pen/azBmdK"> Movie Card</a> by Andre Madarang (<a href="https://codepen.io/drehimself">@drehimself</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andre Madarang
Source: Code / Demo
Created on: JANUARY 02, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Movie Card UI

See the Pen <a href="https://codepen.io/_juanvaz/pen/EGOWQM"> Movie Card UI</a> by Juan Vaz (<a href="https://codepen.io/_juanvaz">@_juanvaz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Juan Vaz
Source: Code / Demo
Created on: JANUARY 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. Movie Card Interactive UI With Pure CSS3 Animation Rating

See the Pen <a href="https://codepen.io/rmcdonalddesigns/pen/QjLrNe"> Movie Card Interactive UI With Pure CSS3 Animation Rating</a> by Reece McDonald (<a href="https://codepen.io/rmcdonalddesigns">@rmcdonalddesigns</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Reece McDonald
Source: Code / Demo
Created on: AUGUST 28, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

5. Movie Card

See the Pen <a href="https://codepen.io/vinnyA3/pen/WGKadE"> Movie Card</a> by Vinny (<a href="https://codepen.io/vinnyA3">@vinnyA3</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vinny
Source: Code / Demo
Created on: OCTOBER 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

6. Movie Card :: RV Code Challenge

See the Pen <a href="https://codepen.io/LegendAF/pen/VvrjYM"> Week #2 :: Movie Card :: RV Code Challenge</a> by Alex Fernandez (<a href="https://codepen.io/LegendAF">@LegendAF</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Fernandez @LegendAF
Source: Code / Demo
Created on: OCTOBER 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

7. Movie Card | CSS

See the Pen <a href="https://codepen.io/havardob/pen/gLWrrK"> Movie Card | CSS </a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: NOVEMBER 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

8. Nav Movie Cards

See the Pen <a href="https://codepen.io/pam_eng/pen/bvLqQj"> Nav Movie Cards</a> by Pamela English (<a href="https://codepen.io/pam_eng">@pam_eng</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pamela English
Source: Code / Demo
Created on: MARCH 29, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Movie Card

See the Pen <a href="https://codepen.io/Lenew/pen/yjyWdM"> Movie Card</a> by Ujváry Ákos (<a href="https://codepen.io/Lenew">@Lenew</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ujváry Ákos
Source: Code / Demo
Created on: APRIL 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, Javascript

10. Movie card UI

See the Pen <a href="https://codepen.io/alexdevero/pen/zBJMmJ"> Movie card UI</a> by Alex Devero (<a href="https://codepen.io/alexdevero">@alexdevero</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Devero
Source: Code / Demo
Created on: AUGUST 03, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. React movie card

See the Pen <a href="https://codepen.io/kingsfull123/pen/OrQazB"> React movie card</a> by sen yang (<a href="https://codepen.io/kingsfull123">@kingsfull123</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: sen yang
Source: Code / Demo
Created on: JANUARY 04, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JS(Babel)

12. Bootstrap responsive movie card | Pure CSS

See the Pen <a href="https://codepen.io/Ikonikov/pen/OjdWmb"> Bootstrap responsive movie card | Pure CSS</a> by Andrej (<a href="https://codepen.io/Ikonikov">@Ikonikov</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Andrej @Ikonikov
Source: Code / Demo
Created on: SEPTEMBER 01, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. Movie Card Design Flex

See the Pen <a href="https://codepen.io/anilmauganj/pen/rNyVLov"> Movie Card Design Flex – Anil Singh</a> by Anil Kumar Sahu (<a href="https://codepen.io/anilmauganj">@anilmauganj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anil Kumar Sahu
Source: Code / Demo
Created on: MAY 09, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Responsive movie card

See the Pen <a href="https://codepen.io/ryanparag/pen/oWrLPr"> Responsive movie card</a> by Ryan Parag (<a href="https://codepen.io/ryanparag">@ryanparag</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Parag
Source: Code / Demo
Created on: MAY 30, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

15. movie card

See the Pen <a href="https://codepen.io/mahmoud-nasser/pen/NBRbOR"> movie card</a> by Mahmoud Nasser (<a href="https://codepen.io/mahmoud-nasser">@mahmoud-nasser</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mahmoud Nasser
Source: Code / Demo
Created on: JULY 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Movie Ticket Animation – Loop 23

See the Pen <a href="https://codepen.io/jorgemoovein-the-bashful/pen/rNOXXxb"> Movie Ticket Animation – Loop 23</a> by Jorge Mendes (<a href="https://codepen.io/jorgemoovein-the-bashful">@jorgemoovein-the-bashful</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jorge Mendes
Source: Code / Demo
Created on: MAY 31, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Netflix Inspired Movie Gallery

See the Pen <a href="https://codepen.io/brixiobodino/pen/NWgobwQ"> Netflix Inspired Movie Gallery</a> by Brixio Bodino (<a href="https://codepen.io/brixiobodino">@brixiobodino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brixio Bodino
Source: Code / Demo
Created on: SEPTEMBER 29, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Responsive Movie Card – Dark Version

See the Pen <a href="https://codepen.io/zim_ejin/pen/vMPjjq"> Responsive Movie Card – Dark Version</a> by Zimuzo Ejinkeonye (<a href="https://codepen.io/zim_ejin">@zim_ejin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zimuzo Ejinkeonye
Source: Code / Demo
Created on: APRIL 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Movie Card UI

See the Pen <a href="https://codepen.io/ZaynAlaoudi/pen/rrYayM"> Movie Card UI</a> by Zayn (<a href="https://codepen.io/ZaynAlaoudi">@ZaynAlaoudi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zayn
Source: Code / Demo
Created on: JULY 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Daily UI Movie Card

See the Pen <a href="https://codepen.io/georgemiro/pen/oxrrwp"> Daily UI Movie Card</a> by George Mironidis (<a href="https://codepen.io/georgemiro">@georgemiro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: George Mironidis
Source: Code / Demo
Created on: MAY 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Movie Cards

See the Pen <a href="https://codepen.io/radostik1/pen/PVvvqG"> Movie Cards</a> by radostik1 (<a href="https://codepen.io/radostik1">@radostik1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: radostik1
Source: Code / Demo
Created on: FEBRUARY 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Movie Card

See the Pen <a href="https://codepen.io/joyguy89/pen/QgomaL"> Movie Card</a> by Ryan Joyner (<a href="https://codepen.io/joyguy89">@joyguy89</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ryan Joyner
Source: Code / Demo
Created on: JULY 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel