25 Free Material Design Code Snippets

25 Free Material Design Code Snippets
Home » Freebies » 25 Free Material Design Code Snippets

August 22, 2018

Line25 is reader supported. At no cost to you an affiliate commission may be earned when a purchase is made through various links on our site. Learn more

Here are 25 free Material design code snippets you can use to build fantastic Material-style websites and web apps. The items we gathered in the list below contains everything from basic color schemes and grid setups to more detailed components like responsive cards, flip cards, news and blog cards, profile cards, switches, container elements, forms, icons, buttons with animations, dropdown menus and carousels.

Check out these code snippets and start building your Material design-inspired website or web app today!

Material Design – Responsive Card

These responsive cards code snippets follow all the Google’s Material Design principles. You can interact with the hamburger menu to initiate a sleek animation where the image is shrunk and the details are displayed. Use it for the team pages or for portfolios. 

1 Material Design – Responsive CardPin

Google Now Inspired Flip Cards

These flip cards code snippets were inspired by the Google Now personal assistant app design. It has a long drop-shadow effect and they flip on click and touch. 

2 Google Now Inspired Flip Cards Free Material Design Code Snippets Pin

Parallax Depth Cards

These parallax depth cards were designed by Andy Merskin. These photo cards have cool hover effects that make them change their perspective and add a parallax scrolling effect tied to the user’s cursor position. That’s when the text content is revealed. It looks amazing! 

3 Parallax Depth Cards Free Material Design Code Snippets Pin

Product Card

Check out this product card code snippet which is perfect for listing your products in a simple, clean way. The hover action reveals sizing and color information. 

4 Product Card Free Material Design Code Snippets Pin

Article News Card

These article news cards code snippets are perfect to be used on a magazine or news website, as well as a blog. The design is organized with a category, date/time, comments, headlines and photo. 

5 Article News CardPin

Blog Cards

This is another great code snippet for blog cards in a horizontal format. It was designed by Chyno Deluxe. The photos are angled, hovering reveals even more content and the design is overall pretty amazing! 

6 Blog CardsPin

Material Design: Profile Card

Check out this profile card that follows the design principles of Material design. It has both horizontal and vertical layouts and the design is simple, clean and straightforward. 

7 Material Design- Profile CardPin

News Cards – CSS only

These news cards are available in CSS only. They have a functional, beautiful design with no JavaScript required. It can be used for blog posts, portfolio items, and more. 

8 News Cards – CSS onlyPin

Flexbox Cards

Here are some flexbox cards code snippets you can use. Their layout is adaptable to headlines of different sizes. It is made with pure CSS, so it’s easy to implement on your site. 

9 Flexbox CardsPin

Recipe Card

If you have a food-related site or blog, this Recipe Card code snippet may be what you need. It has a simple yet effective layout with a featured image, all the needed details for a recipe card and an overall beautiful design. 

10 Recipe CardPin

Demo Web app UI

Check out this cute Muppets-inspired demo web app UI that follow’s the Material design trend. It contains a lot of useful code snippets.

11 Demo Web app UIPin

Material On/Off Switches

For a simpler code snippet to practice with have a look at these toggle switches. They also follow the material design trend with flat colors and a simple sliding animation.

12 Material On:Off SwitchesPin

Container Elements

Here are some container elements code snippets that offer a Material response. The users’ clicks are registered and recorded with a micro interaction.

13 Container ElementsPin

Action Button Animation

This is an action button animation available as a free code snippet. It changes the dot navigation icon into a small X icon you can link to a drop-down nav or a modal window. Just note this requires a good amount of customization to get it working with other features.

14 Action Button Animation Free Material Design Code Snippets Pin

Step-By-Step Form UI

Here is a Material form user interface that comes as a free code snippet. It has a step by step process which you can use in modern web forms.

15 Step-By-Step Form UIPin

Custom Tabs

If you need a custom tabs code snippet, this is it. It is basic and perfect for Material design lovers. Switch it through and experience the animations it comes with. 

16 Custom TabsPin

Material Input Form

This is a Material design input form with floating input labels. Click on the link above to observe the animations. 

17 Material Input FormPin

Angular Material Dashboard

This Angular Material design dashboard was created by Ajay Viswanathan from scratch. Get the code snippets and learn how to implement it in your own projects. 

18 Angular Material DashboardPin

Material Progress Bar

Here is a Material design progress bar with a simple design. Use the code snippets if you need to add a material-style progress loading bar into your website. 

19 Material Progress BarPin


Materialize.css is a free library you can use for your projects which are based on Material design. Use this as a starting point for building Material-style websites. It contains useful code snippets for everything you may think of!

20 MaterializePin


This is another great library to start your Material design projects with. MUI is lightweight and can be used as a CSS framework for UI designs.

21 MUIPin

Material Bootstrap

Material Bootstrap offers you a bunch of useful code snippets for developing Bootstrap projects based on the Material design trend. It is based on the Bootstrap v4 update.

22 Material BootstrapPin

Material Foundation

Check out this useful Material design library. It comes with all the elements you may think of and a comprehensive documentation page. 

23 Material FoundationPin


Material UI framework is a set of React components you can use if you want to build Material  design web apps.

24 Material-UIPin


LumX is based on the Angular framework and mimics the Material design language. It gets frequent updates and contains plenty of code snippets you can use. 

25 LumXPin

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

No Comments Yet

Would you like to say something?

Please Share