With Material Design fast spreading its reach and popularity in web design, we have compiled this list of some of the best Material Design HTML5 templates. Most of these templates are available for free download along with premium high quality templates available for reasonable prices. All the HTML5 templates mentioned here are responsive and mobile-friendly and will help you give your website the perfect Material Design look.
Ease of customization is one of the top features we look for when picking a HTML5 template, and hence you will find the templates listed here easy to use and customize. Moreover, you can use these Material Design CSS frameworks for customizing and adding additional material components to the HTML5 website templates presented here. If you are using WordPress, then you will find our collection of Material Design WordPress themes useful.
(We have updated the post with many more free HTML5 templates built with Material Design principles. These new templates include portfolio templates, blog templates, admin templates, landing page templates and much more. Enjoy and don’t forget to leave us a comment if you find this article useful.)
Recommended Material Design HTML UI Kits
Using a material design UI Kit makes it easier for you to implement a website in material design. These materials kits also offer pre-designed website templates in material style. We are listing our favorite Material Design HTML kits below that we use ourselves when designing material design websites and web applications. While both these UI kits are completely free, they provide premium license too which will give you additional material design components and pre-design professional quality templates. Check out these awesome kits first:
Material Kit- Free Bootstrap Material Design UI Kit
Material Kit is a Free Bootstrap UI Kit made by Creative Tim with a design inspired by Google’s Material Design. It has an excellent implementation of material concepts and provides easy to use and beautiful set of material design components. You will find three fully-coded example templates included with the kit, which are helpful in designing your own web projects.
Material Kit is available for free download from the Creative Tim website. For those who want more, Material Kit comes with a premium version too, which includes over 1000 components and 11 example templates, you can check it here: Material Kit PRO
List of Free Material Design HTML5 Templates
Find below an extensive list of free Material Design website templates. Links to view the demo and to download these free templates are provided with each template. Do let us know in comments if any of the links is not working and we will try our best to correct the download link.
Material Landing – Free Material Landing Page
Material Landing is a free material design landing page template built by our team at TemplateFlip with a Bootstrap based material kit called the MDB UI Kit. The landing page has a clean material look which is ideal for creating conversion optimized landing page for a product or website of an agency or a company. Built by TemplateFlip, the template has sections designed in material design for displaying product/company’s features, best projects, pricing plan as well as team members. Eye-catching animations are played upon scrolling the landing page.
Material Portfolio – A Material Design Portfolio Template
Material Portfolio is built with MDL framework and is a completely free portfolio template suitable for use by individuals as well as companies and agencies. It includes templates for different sections of the website such as homepage, about, contact and portfolio pages. The template has easy to understand code and is easily customizable and extensible using the MDL framework.
Materialize Parallax Template
This is a free Material Design template that Materialize CSS offers with a Header, Call-to-Action, Icon Features and Parallax scrolling.
Materialize Starter Template
This is a simple starter template offered by Materialize with a Header, Call-to-Action, and Icon Features. It features responsive design and grid layouts.
One Page Material Design Template
This is a one page Material Design HTML template based off the Materialize CSS framework. The template includes styles for several sections including work, team, and a nice big header.
Material Design App Landing Page
This is a simple one page HTML template design to use as an app landing page built using Project Polymer. The template is easy to setup and deploy.
Material Template with Jekyll
An HTML5 responsive template incorporating Google’s Material Design Standards along with Jekyll from Naveen Shaji.
Material Design Blog Template
This is a mobile focused responsive template that showcases image or text based blog entries, a subscription CTA, search & share links, and an expanded article page with comments, counters and bookmarking capabilities built-in.
This free material design blog template is built with Material Design Lite.
ANDROID.COM MDL SKIN
A Material Design Lite version of the current android.com site, using the same content with a horizontal navigation, feature carousel and long form scrolling sub pages.
This template would prove to be great for building your own material design e-commerce website with responsive menus.
Material Design Admin Dashboard
Download this free material design admin template with a modular responsive admin dashboard built to display data visualizations and information with a clear vertical nav, user profile, search and dedicated space for updates and filters.
Template for Text-Heavy Page
Have a large amount of text in a page can be a design problem but with this clean material design template for a text heave page, you are at ease.
Built for presenting content that is information dense, easily updatable, and optimized for legibility, this template has a sticky horizontal top nav on mobile, feature callouts, cards and a site map footer with a deep-linked table of contents.
Stand Alone Article Template
Do you know what’s in trend these days when in comes to blog posts? A clean and content focused layout like this one.
Download this clean layout optimized for presenting text-based content with a breadcrumb nav, search, clear headers and a footer that utilizes a card-like structure to showcase the content.
Bootstrap Basic Landing Page Template
A basic landing page whihc is simple, clean and informative. It can offer quick presentation of your platform with a pure purpose of getting your visitors attention and guiding them further.
Bootstrap Food Order Homepage Template
Food order homepage is fully customized template designed exclusively for restaurants and businesses related to the industry. The intuitive interface will guide your visitors progressively through the ordering process.
Full Page Video Carousel Template
Don’t limit yours carousel to just static photos. With this material design video carousel template you can embed video as easy as pictures.
Half Carousel Template
With this half carousel template, now you can have both image carousel and your portfolio above the fold. It include responsive menus and search box too.
Corporate Style Template
This material design corporate style template is a clean and elegant theme suitable for displaying your product, app, business or service.
Full Page Image Carousel Template
This one is a full page image background slider built using the Material Design for Bootstrap carousel. You can use this template to create one page portfolio sites, and much more.
Material E-commerce Homepage Template
Giving you e-commerce website a material design look? This material design e-commerce template will surely draw eyeballs. It includes an image carousel as well as an e-mail subscription form.
Full Background Image Template
A lot of websites are built with full background image these days and with this free HTML template you can build one yourself with material design elements.
Blog Homepage Template
Download the modern blog template with clean material design looks and large featured images for each posts. Includes a subscription form with material design animations in form fields and buttons.
E-commerce Product Page Template
E-commerce Product Page Template is a fully customizable and suitable for e-commerce websites of any purpose. Along with the e-commerce homepage template we listed above, you will have necessary templates to build a complete e-commerce website.
Three Column Listing Template
This three Column Listing Template is provided for free from MDB template and can easily used as your new personal portfolio. It provides a modern, flat and responsive design.
One Column Listing Template
This one column listing template can be used to display your products or projects in your portfolio with ease.
Jumbotron with Features Template
Jumbotrons are not yet out of trend yet and this beatiful and free material design template proves that jumbotrons are here to stay.
Two Column Listing Template
Two column templates are our favorites and when they come with material design it is even better. Grab this free two column listing template from MDB’s website.
Premium Material Design HTML5 Templates
If the above selection of free material design HTML5 templates does not fulfill your needs, we have also put together this handy list of some of the very best premium and affordable Material Design HTML5 Templates. Kindly note that some of the links below are affiliate links.
Material Design for Bootstrap 4
Material style is a multi-purpose material design template built with Bootstrap 4. It offers multiple color schemes and large variations of pre-built custom designed pages such as profile, timeline, e-commerce, forms, about us and a lot more. It also includes over 100 components in material design style to build a website.
MaterialX – Material Design Personal Template
MaterialX is a premium material design resume and portfolio template based on Bootstrap and Materialize. It is designed for professionals as well as companies to display their Profile, Resume, Portfolio etc. The template is easily customizable and fully responsive for all devices. The templatate features subtle on scroll animations to wow your audience.
Material Admin – Bootstrap Admin HTML5 App
Material Admin is based upon the material design principle developer by Google. It’s made with Bootstrap, jQuery and Less. Material Admin includes pages for email, CRM, blog, user profile and many more. The framework contains a lot of components so you can easily create custom pages.
Materialish – Mobile & Tablet Responsive Template
Materialish is a mobile and template responsive HTML5 site template. It includes 400+ Font Awesome Icons, iOS Homescreen WebApp and jQuery Swipe image slider.
Materialism – Angular Bootstrap Admin Template
Materialism is an Admin Template based on Angular JS with Bootstrap 3. The whole Template is compiled with Grunt and Bower which are tools to speed up your development significantly. With the supplied Gruntfile.js you can easily make your changes and build your own version.
Material News – Multipurpose Responsive HTML
Material News is a fully responsive HTML Template Based on Google Material design. It features clean design that allows visitors to focus on content. It’s very code-light, making it quick to load, and has a pleasingly clean look that’s ideal for multipurpose websites such as News, E-Commerce or blog. It is superbly responsive adapting to any kinds of smart phones and mobile devices.
Do these Material Design website templates live up to your expectations and needs? If you are overwhelmed with options then might we recommend you choose the bootstrap material UI kits like: MDB or Material Kit Pro. These UI kit will provide you with multiple Material Design HTML templates, along with enabling you to add additional Material Design components to your website with ease. It also has excellent documentation as well as support from the developers.
If you come across any other free Material Design template that we have not covered in this post then do leave us a comment below.