21+ CSS Movie Cards

CSS movie cards are utilized to present movie information in a helpful and visually appealing manner. Within user interfaces (UI), cards enhance the user experience by allowing users to easily scan information on both web and mobile applications without straining their eyes.

In this comprehensive compilation, we are featuring 21+ HTML, and CSS movie cards code examples. Our compilation features captivating movie card designs, expertly crafted to enhance the beauty of your projects, sourced from reputable platforms like CodePen and GitHub.

Let’s explore these 100% free stunning HTML and CSS Movie card code examples.

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