With Material Design becoming a well-known standard in web design, many business as well as startups have started adopting it. Websites with material design offer great user experience and known UI elements that are great for building both website as well as backend app or admin dashboard. We have compiled this list of some of the best Material Design HTML5 templates available for building website landing pages and portfolios. Most of these templates are available for free download. We have also included premium high quality templates that are available for reasonable price and good support.
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.
These templates are built with Material Design UI frameworks that conform to the Google Material standards when it comes to shadows, animations and motion. Use of a popular CSS framework such as MDB will also help you when you are customizing these templates and adding additional sections in the website or are building services having dashboards or e-commerce. 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.)
Best Material Design Website Templates
Find below an extensive list of free as well as premium Material Design website templates. Links to view the demo and downloading these 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. Kindly note that some of the links below are affiliate links. We have also motioned which templates are free to download. Framework used to build these website templates are also mentioned.
1. Material Landing (Free, MD Bootstrap)
Material Landing is a free material design landing page template built by 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.
2. Material App (Free, MD Bootstrap)
Material App is a free app landing page template built with material design using the MDB UI Kit and Bootstrap framework. The template has a clean material look and is ideal for creating conversion optimized landing page for any mobile app, software or service. It features a full screen background image with call to action buttons for downloading the app from app stores. The design includes all the essential sections including sections for showcasing your app’s features, screenshots, pricing plan, about us, team members, customer testimonials and more.
3. Material Portfolio (Free, MDL)
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.
4. Material Resume (Free, MD Bootstrap)
This is are many professional design material resume templates including HTML websites. This is our pick for the material resume or portfolio site as it has all the section you need when creating your online portfolio or CV. It is a responsive design resume website template that has been built with the MDB UI Kit. This template offers subtle on-scroll animations and material design look and feel including box shadows. It has sections for showcasing skills, experience, projects, reference etc.
5. Parallax Theme (Free, Vuetify)
The Parallax Theme is a free template with Material design style. It is targeted at beginners who want to start exploring Vuetify without the distraction of a complicated development environment.
6. Freelancer Theme (Free, Vuetify)
The Freelancer Theme is a free single-page template designed for freelancers. Built with Vuetify, it provides a responsive and beautiful user interface in Material style that is easy to customize.
7. Blog Theme (Free, Vuetify)
This is a free material design based blog theme. It has been built with Vuetify and features a clean interface for creating a blog or blog-like applications.
8. Zero Theme (Free, Vuetify)
Zero is a free multi-purpose and responsive theme with a clean interface and Vuetify library as its core UI component.
9. Vuetify Material Dashboard (Free, Vuetify)
This is a free admin template developed by Creative Tim. It has over 16 components and 7 example pages, all with material design style. It has been built over Vuetify, Vuex and Vuejs. You can find many other Vuejs admin templates on our site.
10. Material Style (Premium, Bootstrap)
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.
11. MaterialX – Material Design Personal Template (Premium, Bootstrap)
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.
12. Materialish (Premium, Bootstrap)
![preview_590.__large_preview[1]](https://superdevresources.com/wp-content/uploads/2015/05/preview_590.__large_preview1.jpg)
Materialish is a mobile and template responsive HTML5 site template. It includes 400+ Font Awesome Icons, iOS home screen, WebApp and jQuery Swipe image slider.
13. Landing Page Template (Free, MD Bootstrap)
A basic landing page which 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.
14. Full Page Video Carousel Template (Free, MD Bootstrap)
Don’t limit yours carousel to just static photos. With this material design video carousel template you can embed video as easy as pictures.
15. Half Carousel Template (Free, MD Bootstrap)
With this half carousel template, now you can have both image carousel and your portfolio above the fold. It includes responsive menus and search box too.
16. Full Page Image Carousel Template (Free, MD Bootstrap)
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.
17. Material E-commerce Template (Free, MD Bootstrap)
Giving you e-commerce website a material design look? This material design e-commerce template will surely draw eyeballs. It includes templates for e-store homepage with an image carousel, product page and checkout page. With these free starter templates, you will have necessary templates to build a complete e-commerce website.
18. Full Background Image Template (Free, MD Bootstrap)
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.
19. Blog Homepage Template (Free, MD Bootstrap)
![blog-home-template-min[1]](https://superdevresources.com/wp-content/uploads/2015/05/blog-home-template-min1-768x349.jpg)
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.
20. Three Column Listing Template (Free, MD Bootstrap)
![3col-template-min[1]](https://superdevresources.com/wp-content/uploads/2015/05/3col-template-min1-768x349.jpg)
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.
21. One Column Listing Template (Free, MD Bootstrap)
This one column listing template can be used to display your products or projects in your portfolio with ease.
22. Jumbotron with Features Template (Free, MD Bootstrap)
![jumbotron[1]](https://superdevresources.com/wp-content/uploads/2015/05/jumbotron1-768x349.jpg)
Jumbotrons are not yet out of trend yet and this beautiful and free material design template proves that jumbo-trons are here to stay.
23. Two Column Listing Template (Free, MD Bootstrap)
![2col-template-min[1]](https://superdevresources.com/wp-content/uploads/2015/05/2col-template-min1-768x349.jpg)
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.
24. Parallax Template (Free, Materialize)
![material-parallax[1]](https://superdevresources.com/wp-content/uploads/2015/05/material-parallax1-768x768.jpg)
This is a free Material Design template that Materialize CSS offers with a Header, Call-to-Action, Icon Features and Parallax scrolling.
25. Starter Template (Free, Materialize)
![Starter-Template[1]](https://superdevresources.com/wp-content/uploads/2015/05/Starter-Template1-768x483.jpg)
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.
26. Material Design App Landing Page (Free, Polymer)
![material-design-app-landing[1]](https://superdevresources.com/wp-content/uploads/2015/05/material-design-app-landing1-768x768.jpg)
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.
27. Material Template with Jekyll (Free, Materialize)
![material-jekyll[1]](https://superdevresources.com/wp-content/uploads/2015/05/material-jekyll1-768x768.jpg)
An HTML5 responsive template incorporating Google’s Material Design Standards along with Jekyll from Naveen Shaji. Unfortunately, the demo link of this template is broken. However, the source code is still available on GitHub.
28. Material Design Blog Template (Free, MDL)
![blog_2x[1]](https://superdevresources.com/wp-content/uploads/2015/05/blog_2x1-768x415.jpg)
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.
29. ANDROID.COM MDL SKIN (Free, MDL)
![android-dot-com_2x[1]](https://superdevresources.com/wp-content/uploads/2015/05/android-dot-com_2x1-768x415.jpg)
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.
30. Material Design Admin Dashboard (Free, MDL)
![dashboard_2x[1]](https://superdevresources.com/wp-content/uploads/2015/05/dashboard_2x1-768x415.jpg)
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.
31. Template for Text-Heavy Page (Free, MDL)
![text-only_2x[1]](https://superdevresources.com/wp-content/uploads/2015/05/text-only_2x1-768x415.jpg)
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.
32. Stand Alone Article Template (Free, MDL)
![article_2x[1]](https://superdevresources.com/wp-content/uploads/2015/05/article_2x1-768x415.jpg)
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.
Material Design HTML UI Kit (Free with upgrade)
Using a material design UI Kit makes it easier for you to implement a website as well as any related services in material design. A well made materials kit offers pre-designed website templates in material style and can also be upgrade to provide additional UI styles, templates and support.
MDB UI Kit (Bootstrap & Material Design)
MD Bootstrap is well implemented Material UI kit and is available for both Bootstrap 4 and Bootstrap 5. It offers 700+ Material UI elements, 600+ Material icons, 74 CSS animations in the free version along with many free HTML templates. There is a premium version of this UI Kit available which gives you access to 2000+ components, premium sections, plugins and JavaScript modules. On their site you will find many free material design templates as well as tutorials to build websites with Bootstrap and Material Design. (read MDB benefits)
There are many other Bootstrap UI Kits with different design principles that may interest you too.
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 kit MDB. This UI kit will provide you with multiple Material Design HTML templates, along with enabling you to add additional Material design components, sections and apps like features 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.
Before you go, don’t miss our list of top Material Design resume templates and Material Design Tumblr themes.
Cover Image made with Pixelied
Great themes…Perfect design work
Many thanks for posting :)
Thanks for posting! :)
I downloaded the link but it’s not taking the style only the text should I change the links or something
Thank you for the fast reply
Which one did you download?
I really love these templates, thanks for sharing. I liked Full Page Video Carousel Template. Tried to verify it in my mobile (Moto E), video is not playing whereas it is fine in desktop.
Hi Vishwanath, we too did notice the video for this Full Page Video Carousel Template not playing on Android. But this is likely to do with videos on Android browser rather than the template itself. If you are able to use a video which are playable inside browsers on Android with HTML5, then you should get it working properly with this template.
How do I use these themes? I want to use the dashboard one, copied the files from the template over to the extracted MaterializeCSS folder but there the page doesn’t look similar to the images.
Hi Ramit, once you download the zip file for “Material Design Admin Dashboard” template, you will find templates folder in the extracted zip file. Inside that folder there is another folder named dashboard which contains the dashboard template (all necessary HTML and CSS are in there) which you can use in your project.
Do let us know if you face any more issues. Also kindly be more specific about what errors you are getting (provide screenshots if necessary) so we can be of further help.
Thanks,
TemplateFlip Team
Hi
The material.js script, is for the behavior of the components right? I can create my own javascript with jquery and define my own functions without editing that file?
Great material website design resources! The “materialstrap” link is broken, just FYI.
Thank you for letting us know. Unfortunately that template is no longer available. However, we have updated the article with some new material design HTML5 templates.
great design and positioning
Nice collection.
I would have been better if you had categories these theme based on the frameworks – MDL, Materialize, MDB etc.
Thanks
Thank you for your suggestion Anurag. We will keep that in mind when we update the post next time.
Thank you, great design
Nice job here!
lovely designs …..
Many thanks…Good job