Never Ending Security

It starts all here

35 Great Resources for Google Material Design

Google introduced the new design language “Material design” at the Google I/O conference on 25th June 2014. It focuses on grid based layouts, padding, floating action buttons, responsive transitions, depth effects like lightning and shadows. Unlike real paper, material design can expand and reform intelligently. With the addition of tactile surfaces, fluid motion and bold graphic design, it allows designers and developers to build more colorful, flexible and compelling application for web, Android and Chrome OS.

If you are finding a way to explore Material design and its usage in your project, here are 34 helpful resources which will help you to make your application/web more attractive.

35. Animated Tabs

Animated Tabs

Polymer app without canvas and polymer. You can use only CSS3 and pure JavaScript.

34. Modern Loader

Modern Loader

A modern Google spinning loader in pure CSS, animating through four colors.

33. Material Design Preloader

Material Design Preloader

A jQuery plugin that recreates the material design preloader as shown above.

32. Material Design Navigation

Material Design Navigation

The pages slide to reveal a clean, simple and smooth navigation.

31. Switch Theme

Switch Theme

A simple and elegant switch theme from Google material design (by Zhoolego).

30. PC Icons

PC Icons

A few material design icons for PCs.

29. Material Shadows


The authentic design shadows without web components, designed by Ben Strahan.

28. Menu CSS

Menu CSS

material design menu with amazing hover effect. Just copy the given CSS and HTML code to your project.

27. Radio Input

Radio Input

This is the custom radio input (CSS only), designed by Christian Hall.

26. The Morphing Icons


The morphing icons are designed by Alberto Bonvicin. Currently, it cycles through the radios randomly or you can change to cycle in order, starting with checked elements.

25. Material Design Form

Material Design Form

A simple and quick material design login form with ripple effect, designed by Josh Adamous.

24. Animation Timing

animation timing

A smart and beautiful animation timing based on material design, created by Sergey Kupletsky.

23. Material Design Buttons

Material Design Buttons

The script automatically (written by Michaela) adds the material design effect to elements with “material design” class. Just add the preferred color as “data-color” attribute. You can also use it on div with images.

22. Product Icon Anatomy


This is animated version of the product icon anatomy guideline from Google material design, created by Jovie Brett.

21. Material Palette

Material Palette

Select your favorite color(s) and get your material design color palette (along with the preview).

20. Material Icons Deconstruction

Material Icons Deconstruction

This is finished clone of delightful details. You can build these kinds of deconstruction just by using HTML and CSS. Users need to click on each section to toggle between icons.

19. Material Interaction

Material Interaction

The page shows the interactive experiences of Material design principle.

18. Ripple Click Effect

Ripple Click Effect

This is kind of click effect which includes an ink-drop like element that moves out rapidly from the position where the user clicks/taps. The simple logic here is to create circles (with smooth transition) at click coordinates behind the links.

17. Hover and Click Effect

Hover and Click Effect

Yet another hover and click effect, in addition with a mixture of different colors which makes it more appealing.

16. The Tiles

The Tiles

The Material design CSS based tiles, created by Sergey Kupletsky.

15. Material Design Icons

Material Design Icons

These are official open source icons featured in the Google material design specification. It includes SVG, PNG and hi-dpi versions of all icons in 24px & 48px.

14. Free Sketch, Templates and Icons

Free Sketch, Templates and Icons

This is a quick start sketch template that includes 424 Android L icons, mobile, tablet and desktop layouts and all the polymer project web component elements.

13. Material Design Icon Expanded

Material Design Icon Expanded

A huge collection that includes over 1400 icons in SVG & PNG format, available in several sizes.

12. Material Design for Bootstrap

Material Design for Bootstrap

It’s a theme for Bootstrap 3 that lets you use the Google material design in your favorite front-end framework. Just include the theme after CSS and include JavaScript at the end of your code (before </body> tag).

11. Material Design for AngularJS

Material Design for AngularJS

It’s a specification for a unified system of motion, visual and interaction design for all devices. It consists of lightweight and clean AngularJS native user interface elements that can be used in single page applications.

10. Lollipop GUI Kit

Lollipop GUI Kit

This is Android’s Lollipop xxhdpi graphical user interface kit designed by Sandip D.

9. Lollipop GUI -2

Lollipop GUI -2

This is Android Lollipop 5.0 PSD with all screens including splash, call, notification, inbox, email, manage file and contact feed screen.

8. Material UI kit

Material UI kit

All new material UI kit (HTML + CSS), designed by UltraLinx. Here’s the demo.

7. Lollipop Material Design UI kit

Lollipop Material Design UI kit

This is the Android Lollipop Material design UI kit for sketch, designed by Ivan Bjelajac. The use cases are based on common UX flows in Android app.

6. Material Design Hamburger

Material Design Hamburger

Android’s material design hamburger is built in CSS that currently supports the latest version of all major browsers. Just download the latest release and include the CSS & JS files from the dist folder where desired within your project.

5. Android Music App

Android Music App

Wanna create a music app? The design is ready for you. It includes home screen, login, my music, contacts, sidebar, top playlist, news feed, player, album view and user playlist screen. Available for $15.

4. Materialize


Materialize is the modern, responsive front-end framework based on material design. It includes tons of gorgeous elements and components like badges, buttons, cards, preloader, icons, colors, grid, form, table, media, shadow, typography and much more.

3. LumX


LumX is the responsive front-end framework based on Angular JS and material design specification. It is built on Google guideline, respecting metrics in pixel perfect way.

2. Material UI

Material UI

It’s a CSS framework and a group of react components that implement Google’s material design. For better understanding start with the React library before diving into material UI.

1. Polymer


Polymer is a large library that uses latest web technology to let you create HTML elements. You can build anything from a small button to a complete application as an encapsulated, reusable element that works on all devices.


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s