HTML & CSS Examples of Material Design in Action

We touched on Material Design a few months ago (Material Design GUI kits, you should check them out!) just as Google’s innovative visual language began building up a head of steam. Since then, we’ve seen many, many sites and apps that have incorporated the visual language successfully. This is going to be the year of Material Design, and we love it

Just in case you haven’t jumped on the Material Design bandwagon or aren’t fully convinced of its merits as yet, we’ve collected a small collection of HTML and CSS examples from Codepen that will surely convince you. Here they are:

Drawer Motion

A demonstration of how the app drawer is filled with motion in Android Lollipop. By Himateja and Jovie Brett.

Animated Tiles

A CSS-based prototype of Material Design's animated tiles. By Sergey Kupletsky.

Morphing Icons

A collection of recreated 'morphing' icons in a Material Design style. By Alberto Bonvicin.

Subtle Animation

A CSS-only recreation of Material Design's flawless and subtle animations. By Michiel Bijl.

Immaculate Transitions

Immaculate examples of Material Design's transitions. By Andrew Tunnecliffe.


A Javascript (jQuery plugin) recreation of the Material Design preloader. By Aaron Lumsden.

Scaling Interaction

A simple recreation of Material Design's scaling interactions. By Dennis Gaebel.

Form Inputs

Examples of the inputs on a Material Design form. By Sergey.

Swipe Animation

A pure-CSS example of Material Design's intuitive card swipe animation. By Michiel Bijl.

Clean Navigation

A Material Design menu system that slides the page to reveal a clean and simple navigation. By Lewi Hussey.

Hamburger Menu

A CSS (with a sprinkle of JS) hamburger menu that has been animated in a Material Design style. By Chris Wheatley.

Loading Spinner

A CSS and SVG recreation of Material Design's loading spinners. By Fran Pérez.

Address Bar UI

A CSS mock-up of Chrome's Material Design address bar (including meaningful transitions). By David Khourshid.

Slide Tabs

A touch enabled side scrolling tab system that mimics Android Lollipop's stock app drawer. By Adam Crockett.


What are your thoughts on Material Design? Have you used it any of your projects? Also, if know of any other animated examples of Material Design, please do share them as well.


  • Daniel

    I love the animations in material design! With these animations it is much more fun to use the application. :)

    As for me, I like to use material design like animations for formulars. Here is just a simple example of how you could easily add it to checkboxes:

  • peoplemustfly

    It looks nice in chrome but not in firefox 35.0.1

  • Milton Díaz

    Wow, really awesome!

  • Some of these demos don’t seem to work correctly in Firefox.

  • Hugh

    They’re so lovely things! Material is a so good idea for designers. I think that flat design merged with real world. Maybe you can add that show material tab style.

  • Super cool,
    starting to feel like i did a mistake choosing less instead of scss ;(

  • That’s so 棒!

  • very impressive I love the transition

  • Very cool!

  • Thank you for crediting and featuring my material design slide tabs. Great Codepen picks! :D