Welcome to our latest collection of CSS movie cards. Movie cards are popular these days due to their visually appealing and immersive way of presenting movie trailers. We curated an inspirational, handpicked collection of free HTML and CSS code examples of movie cards showing unique layouts and transition effects, sourced from reputed platforms like CodePen and GitHub.
The CSS Movie Card is a great user interface element designed to display detailed information about a movie, such as the movie title, rating, poster image, full description, and release date, in an attractive format using CSS.
Web designers and frontend developers can use CSS to create movie cards with attractive colors, fonts, transition effects, and immersive layouts to attract users attention, as well as present detailed information in an organized and attractive way.
Let’s explore our attractive examples and elevate the user experience and engagement level of your projects.
01. Nav Movie Cards
See the Pen
Nav Movie Cards by Pamela English (@pam_eng)
on CodePen.
Author: Pamela English @pam_eng
Links: Source Code / Demo
Created on: March 29, 2018
Made with: HTML, CSS
02. React movie card
See the Pen
React movie card by sen yang (@kingsfull123)
on CodePen.
Author: sen yang @kingsfull123
Links: Source Code / Demo
Created on: January 04, 2019
Made with: HTML(Pug), CSS(Sass), JS(Babel)
03. movie card
See the Pen
movie card by Mahmoud Nasser (@mahmoud-nasser)
on CodePen.
Author: Mahmoud Nasser @mahmoud-nasser
Links: Source Code / Demo
Created on: July 18, 2018
Made with: HTML, CSS
04. Movie Cards
See the Pen
Movie Cards by radostik1 (@radostik1)
on CodePen.
Author: radostik1 @radostik1
Links: Source Code / Demo
Created on: February 22, 2019
Made with: HTML, CSS
05. Movie Card
See the Pen
Movie Card by Ryan Joyner (@joyguy89)
on CodePen.
Author: Ryan Joyner @joyguy89
Links: Source Code / Demo
Created on: July 15, 2017
Made with: HTML, CSS(SCSS), JS(Babel)
06. Movie Card
See the Pen
Movie Card by Andre Madarang (@drehimself)
on CodePen.
Author: Andre Madarang @drehimself
Links: Source Code / Demo
Created on: January 02, 2015
Made with: HTML, CSS(SCSS)
07. Movie Card
See the Pen
Movie Card by Vinny (@vinnyA3)
on CodePen.
Author: Vinny @vinnyA3
Links: Source Code / Demo
Created on: October 15, 2016
Made with: HTML(Pug), CSS(SCSS)
08. Movie card UI
See the Pen
Movie card UI by Alex Devero (@alexdevero)
on CodePen.
Author: Alex Devero @alexdevero
Links: Source Code / Demo
Created on: August 03, 2016
Made with: HTML, CSS, SCSS
9. Bootstrap responsive movie card | Pure CSS
See the Pen
Bootstrap responsive movie card | Pure CSS by Andrej (@Ikonikov)
on CodePen.
Author: Andrej @Ikonikov
Links: Source Code / Demo
Created on: September 01, 2017
Made with: HTML, CSS(SCSS)
10. Responsive Movie Card – Dark Version
See the Pen
Responsive Movie Card – Dark Version by Zimuzo Ejinkeonye (@zim_ejin)
on CodePen.
Author: Zimuzo Ejinkeonye @zim_ejin
Links: Source Code / Demo
Created on: April 29, 2019
Made with: HTML, CSS(SCSS)
11. Daily UI Movie Card
See the Pen
Daily UI Movie Card by George Mironidis (@georgemiro)
on CodePen.
Author: George Mironidis @georgemiro
Links: Source Code / Demo
Created on: May 21, 2016
Made with: HTML, CSS(SCSS)
12. Movie Card UI
See the Pen
Movie Card UI by Juan Vaz (@_juanvaz)
on CodePen.
Author: Juan Vaz @_juanvaz
Links: Source Code / Demo
Created on: January 12, 2019
Made with: HTML, CSS
13. Movie Card :: RV Code Challenge
See the Pen
Week #2 :: Movie Card :: RV Code Challenge by Alex Fernandez (@LegendAF)
on CodePen.
Author: Alex Fernandez @LegendAF
Links: Source Code / Demo
Created on: October 17, 2015
Made with: HTML, CSS(SCSS), JS
14. Movie Card
See the Pen
Movie Card by Ujváry Ákos (@Lenew)
on CodePen.
Author: Ujváry Ákos @Lenew
Links: Source Code / Demo
Created on: April 20, 2018
Made with: HTML, CSS, JS
15. Netflix Inspired Movie Gallery
See the Pen
Netflix Inspired Movie Gallery by Brixio Bodino (@brixiobodino)
on CodePen.
Author: Brixio Bodino @brixiobodino
Links: Source Code / Demo
Created on: September 29, 2021
Made with: HTML, CSS
16. Movie Card UI
See the Pen
Movie Card UI by Zayn (@ZaynAlaoudi)
on CodePen.
Author: Zayn @ZaynAlaoudi
Links: Source Code / Demo
Created on: July 28, 2018
Made with: HTML, CSS
17. Movie Card Interactive UI With Pure CSS3 Animation Rating
See the Pen
Movie Card Interactive UI With Pure CSS3 Animation Rating by Reece McDonald (@rmcdonalddesigns)
on CodePen.
Author: Reece McDonald @rmcdonalddesigns
Links: Source Code / Demo
Created on: August 28, 2015
Made with: HTML(Haml), CSS(SCSS)
18. Movie Card | CSS
See the Pen
Movie Card | CSS by Håvard Brynjulfsen (@havardob)
on CodePen.
Author: Håvard Brynjulfsen @havardob
Links: Source Code / Demo
Created on: November 22, 2016
Made with: HTML, CSS(SCSS)
19. Responsive movie card
See the Pen
Responsive movie card by Ryan Parag (@ryanparag)
on CodePen.
Author: Ryan Parag @ryanparag
Links: Source Code / Demo
Created on: May 30, 2017
Made with: HTML(Pug), CSS(SCSS)
20. Movie Ticket Animation – Loop 23
See the Pen
Movie Ticket Animation – Loop 23 by Jorge Mendes (@jorgemoovein-the-bashful)
on CodePen.
Author: Jorge Mendes @jorgemoovein-the-bashful
Links: Source Code / Demo
Created on: May 31, 2020
Made with: HTML, CSS
21. Movie Card Design Flex
See the Pen
Movie Card Design Flex – Anil Singh by Anil Kumar Sahu (@anilmauganj)
on CodePen.
Author: Anil Kumar Sahu @anilmauganj
Links: Source Code / Demo
Created on: May 09, 2021
Made with: HTML, CSS
