Today I am here with some best material design card css examples for your inspiration. Material cards look awesome on web pages or on any kind of UI design. When I was finding some material design card examples I noticed that it’s hard to find great examples and it wast much time to find them here and there. So I decided to collect all good material design cards and share them with you to save time.

Material design is a great design concept of Google. The material design looks more practical and touchable and it gives users a smooth feel. Material design widely uses in smartphone app word and day by day its tacking major part in web design. Material design cards help you to promote your products and services.

You may also like… 


So let’s enjoy Best Material design cards CSS with examples


1. Material Design Card – For blog post design

This is an awesome material design card example for the blog post. If you are finding a good card design inspiration for your blog post you can check this design. This material card Created By Mithicher Baro.

Code and Demo


2. Material card CSS with Overlay Animation

This material card CSS is great with overlay animation. Just click on the button and see the magic. If you want a cool card to showcase your feature use can try this design. You will get CSS and source codes with the design. You can use it free for your project.

Code and Demo


3. Material design Playing Cards

An example of material playing card design. This card has been designed with CSS and HTML. You can see codes from codepen through the link blew.

Demo & Source


4. Jelly Effect in material design card

Jelly Effect material card is cool. This is an example of mind-blowing material card design. This card can give you about section a great look with the animation. This is a great design to introduce a person with the material card.

Demo & Source


5. Material design news article card

This is another great example of material design news article card. It has a nice hover animation effect. You can use this design on your blog or news post design.

Demo & Source


6. Introducing people material cards

A group of material design card to introduce people. If you want to show your team members with a material design card it can be a great example for you.

Demo & Source


7. Hi There – Author bio material card css

A nice card design for bio or about section. You can try this design for your bio section design.

Demo & Source


7. Product material Card

This is a material design card for online shop. This card design can give your shop an elegant look. What you are thinking about? I did not find any better card design for products than this,

Demo & Source


8. Material Weather Card

An example of weather card design. If you want to show weather information through material design card then you can try this one for free.

Demo & Source


9. Shop material card css

Another good example of shop card design for online shop. This card can make your online shop very professional. You can see their source code and edit according to your website.

Demo & Source


10. Material design for movie card

A material design box for any kind of short review. You can display a short review of your product with a great design.

Demo & Source


11. Twitter Profile material card

I like this material design profile card design very much. You can display your profile info with this professional design material card. This is a great material design card example.

Demo & Source


12. Material cards css demo

If you want to show your team members with material design. You can try this one. This is a colorful design and you can also change color to match your website color.

Demo & Source


13. Food Widget

This is another review box design with rating system and large image.

Demo & Source


14. Material Design Card css with box-shadow Effect

This is a very helpful material design card. There are some simple boxes with box shadow. You can use their demo code and make any kind of box with shadow. You can change size according to your needs.

Demo & Source


15. Google Material Design Card templates

They are very simple design google material design card example. You can use their codes and customize. If you try and add some design you will able to make it great. I hope you will like it.

Demo & Source



Do you love to use animation to your design? This is a very beautiful material card design with source codes for you. Follow the link to see design and animation effects.

Demo & Source


17. Ionic Material Cards

This material card design is unique made using html and css coding structure. You can use this card design to display your service main features and give your website a material design feel.

Demo & Source


18. Skill Material Card

If you want to make your online portfolio more professional with material design and want to show your skills with material design cards. This is a perfect example for you.

Demo & Source


19. Material profile card

This is a very professional material profile card design with animation effects. Made with HTML and CSS codes. You can see source codes and use it on your own project.

Demo & Source



Another design for card based on Google’s Material Design with animation effects.

Demo & Source


21. Clash of Clan Cards

Material design card

This is a great example of material design card inspired by the clash of clan game. This is a slider card designed with HTML, CSS, and JavaSript. This amazing material card has a cool animation effect. You can see their code to know how they built this card and make your own card to make your blog or website more interactive with material design.

Demo & Source


22. Card animation

This is one of the best material design cards I have ever seen. The developer worked hard to make this card which is able to grab the full attention of website visitors. This card has an animated background image and if you hover your mouse cursor on the card you will see hover animation. The developer also added three variations of this material design card. This card is designed with HTML, CSS and Javascript.

Demo and download


23. Contact Cards

Do you want to show your team members using the material design card? This is one of the best design material cards to display your team member. This material card is designed with pure CSS and HTML. Contact cards designed by Callum Brown and you can see the code from CodePen.

Demo and download


24. React Profile Card with image upload

This is a dynamic profile card just for your inspiration. You can check the source code to know how the developer built it.


I hope you got some inspiration for material design cards. If you want to share any good design that you know, you can comment blew and mention the card design. I will try to add in this article. I will also some new material design CSS card examples if I find any. If you have examples of material design cards don’t forget to mention here I will add to the list.


I am Adol, a web developer, and blogger from Bangladesh. Designing is my passion. I love to share my knowledge and useful information through my posts. Ask me anything I know the answer because I have google :)