Web Design

Over time we have collected many interesting and essential web design tools and graphic resources every freelancer designer or non-designer should know! Make your website UI/UX friendly and amaze your visitors with ready-made graphic designs. Simply power-up your web and graphic design projects whenever it is a landing page, blog post, email newsletter, theme, template, print material, or a social media post.
Our web design toolkit for bloggers, designers, non-designers, artists, and creatives provides essential design materials, apps, and resources that will enhance your design skills and speed up your workflow! Even if you don’t have any design experience, you will find most of these design tools very user-friendly and useful when creating your next project.And best you’ll get all of this for absolutely free. You don’t have to spend a penny on hiring a graphics designer or paying fees to graphic design shops!
These tools will save you time and money, so you’ll probably don’t want to miss it! This article won’t give you the answer to what are the best free web design tools. You’ll have to figure out yourself!This web design toolbox will cover a lot of graphic design freebies and free website design tools including Free Icons, Stock Images, Stock Videos, Illustrations, and Fonts, Live CSS Editors, Online Graphic Editors, Color Scheme and Element Generators, Compressors, and more…Make sure to bookmark this page as we will update it from time to time! We also have other collections: Free Web Development Tools or Free SEO Tools.

Minify, Compress & Resize Images

These tools will allow you to make your website faster and save bandwidth by compressing or resizing your images.

  • ResizeImage – Free online image resizer.
  • TinyJPG – Smart JPEG compression by 40-60% without losing quality.
  • TinyPNG – Free lossless image compression tool. Powered by smart PNG compression algorithms that shrink the image by 50-80% while preserving full transparency and quality.
  • uPNG by Photopea – Free PNG minifier to optimize your PNG files and reduce thier size. You can choose the ideal balance between the quality and the size.
  • ShortPixel (Free Plan) – Lossless image compression tool to reduce the size of image files without losing quality. Free plan is limited to 100 images per month.
  • ImageCompressor – An online image optimizer that uses lossy compression algorithms to reduce the filesize of JPEG and PNG images to the minimum possible size without losing quality.
  • PicResize – Free, easy to use online image resizing tool. You can crop, resize, and edit any image from your PC or a URL.
  • Compress-or-Die – Online image compressor and resizer for design professionals.
  • iLoveIMG Image Resizer – Resize JPG, PNG, SVG or GIF by defining new height and width pixels. Change image dimensions in bulk.
  • Kraken Image Optimizer – Free online image optimizer by Kraken.io, free edition offers only compressing of images.
  • Squoosh – Free online image compresser and resize. Easily compress images right in your browser.
  • Img2Go – Free online image compresser and resize tool. Reduce the size of an image or resize it to a new dimensions.

Color Schemes and Palettes

Get inspired with thousands of design-ready color palettes and schemes or generate a new color palette from a single color.

  • Color-Hex – Get info about colors, find similar colors.
  • Hailpixel – An easy way to create and share color palettess.
  • Color Space – Enter a color and generate cool color palettes.
  • Adobe Color CC – Create color schemes with the color wheel or browse thousands of color combinations from the Kuler community.
  • Coolors – Super fast color schemes generator.
  • HTMLColorCodes – Find HTML, Hex, RGB color codes, with unique color picker.
  • ColorFavs – Free random color palette creator. Simply discover new colors or palettes to use on your projects. You can also create a palette from an image (you can also load from URL).
  • Canva Colors – Design wiki on colors.
  • Material Palette – Material design color palette generator.
  • Color Safe – Generate color palettes.
  • ColorHunt – Thousands of trendy hand-picked color palettes.
  • ShutterStock Colors Schemes – A full spectrum of beautiful colors for any color palette or color scheme.
  • LolColors – Curated color palette inspiration.
  • BrandColors – Collection of official brand color codes.
  • 0to255 – Free color picker tool that helps you to find color variations. You can also choose colors for your design files and adjust them fast and easy.
  • BootFlat Color Picker – Color picker that will help you to find great colors for your flat design projets.

Element Generators

Easily create new design elements such as buttons, menus, ribbons, backgrounds, and more…




  • Doodad’s Pattern Generator – Free pattern generator that allows you to create unique, royalty-free patterns and export them as SVG, JPEG, or PNG, to use for free in any project.
  • Patternizer – A simple stripe pattern generator.
  • PatternIco – A pattern generator to easily create patterns and backgrounds online. You can also check the Emoji version.
  • CSS3Menu – Create free Drop Down Menu with pure CSS.


  • Web3Forms (Free Plan) – Create contact forms for static websites. Form submissions are delivered directly to your mailbox without using a server or back-end. Free plan is limited to 250 monthly submissions.
  • CabinPanda (Free Plan) – Data collection service that will help you to collect data from your visitors using forms, popups, backendless forms.
  • GetFormly (Free Plan) – Allows you to collect data offline using forms & surveys. Free plan is limited to 3 forms, 10 questions and 100 responses per form.

Online Graphic Editors

  • Pixlr Editor – Online Photo Editor.
  • Visme – Create engaging presentations, professional infographics, and other stunning visuals online.
  • Vectr – A free graphics software used to create vector graphics easily and intuitively.
  • Photopea – A free advanced online image editor supporting PSD, XCF, XD, Sketch and CDR formats. Edit photos right in your browser like a pro!

Free Templates/Themes

Free html site templates and themes. You might be wondering what is the difference between template and theme. right? A theme is a complete design of your website that contains all the design elements while template provides a different page design for special/certain pages on your website. Most of the themes/templates include footer attribution link to the designer/owner, you must not remove it in order to use the theme/template for free.

  • Templated.co (License) – Free HTML5 site templates under the Creative Commons Attribution 3.0 license, to use for personal and commercial projects.
  • OnePageLove – Free beautiful modern one page templates
  • BootstrapMade (License) – Free elegant and fully responsive bootstrap templates (80+) for your next personal or commercial web project. (The free templates gives backlink to BootstrapMade)
  • StartBootstrap – Free open source bootstrap themes and templates. All materials are licensed under the MIT license.
  • 3RDWaveMedia Themes – Free bootstrap themes & templates with source files included to customise the templates for your needs. You must keep the footer attribution link in order to use the template for free.
  • Cruip (License) – Free beautifully designed HTML landing pages to easily get started with your startup page.
  • ThemeFisher (License) – Beautifully designed Free Bootstrap templates for personal use only. attribution required.
  • TemplateMonster – Free modern HTML/Wordpress templates for personal use. In order to download the free templates you must share the link on social networks.

Free Icons/Symbols/Cliparts

Find free SVG & PNG icons for your projects from and for designers and developers around the world. Some of the services require you to give attribution to the original author. so please make sure you check the license info of each material you use.

Multiple Icon Sets

Find your desired icon faster by searching on multiple icons databases.

  • Iconify – Search for glyph fonts and SVG icons on multiple free or open source collections.
  • GlyphSearch – Search for icons from icon packs such as Font Awesome, Foundation, Glyphicons, and more.
  • Fontello – A tool to quickly pack vector images into webfonts.
  • WeLoveIconFonts – Free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only)

CSS/Font/SVG Icons

Free font/SVG icons to use on your web projects.

  • Font Awesome (License) – Popular and easy to use icon set and toolkit. Get vector icons and social logos on your website.
  • SimpleIcons – Over 1400 Free SVG icons for popular brands. CC0 licensed.
  • RemixIcon – Set of open-source neutral-style system symbols elaborately crafted for designers and developers. Free for both personal and commercial use.
  • MDBootstrap – Free collection of customizeable Bootstrap icons.
  • MFG Labs Icon set – Free collection of fully scalable icons. Icons are licensed under a Creative Commons Attribution 3.0 License.
  • Microns – Free set of icons designed specifically for user interfaces.
  • Octicons – Free custom font icon set by GitHub Team.
  • IconMonster (License) – Free simple icons for your next project.
  • Evil-Icons – Simple SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.
  • BoxIcons (License Info) – Open source web project that provides high-quality simple vector icons for designers and developers.
  • LineIcons (License Info) – Free collection of 2000+ handcrafted line icons for designers and developers developing modern user interfaces.
  • IconPark – Free 1,200+ high-quality icons.
  • HeroIcons – 200+ hand-crafted MIT-licensed SVG icons, by the makers of Tailwind CSS.

Image/PNG Icons

  • Icons8 (Free License) – Download free icons for free.
  • Noun Project – Over 2 Million curated icons, created by a global community.
  • UXWing (Free License) – Exclusive collection of carefully crafted vector icons for user interface design & Web and Application development.
  • IconFinder – Free and premium vector icons. 3+ million SVG icons. Make sure to check if license of free icon whenever it is “free for commercial use” or “Creative Commons (Attribution 3.0 Unported)”.
  • IcoMoon – Over 5k open source and free icons available.
  • FlatIcon (License Info) – Large database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
  • IconArchive – Icon database of 730k+ icons and 2400+ iconsets. check License section of each icon.
  • FlatIcons.Net – Database of more than 2k flat royalty free icons ready to customize for your personal and commercial projects.
  • IconShock – Get free SVG and PNG icon packs free to use for all your apps, web and social media projects.
  • PNGGuru – Get free PNG clipart images for non-commercial use.
  • Iconscout Icons (Licensing) – Search through 2 Million+ Icons and Images from 1200+ Contributors.
  • GraphicBurger (Licensing) – Collection of icon freebies.
  • SmashIcons – Get access to collection of 26k+ free icons (attribution required).
  • StreamlineIcons (Free Pack License) – Download 30,000 free icons.
  • PNGTree Icons (License Info) – Download free icons in PNG, Vector and PSD format.
  • IconStore (Licensing) – A library of free vector icons for personal and commercial projects, designed by first-class designers.
  • IconBros (Licensing) – Over 260 collections (12K) of free PNG image, SVG vector icons for commercial and personal use.
  • VeryIcon (Licensing) – Icon search engine. You can download icons in SVG, PNG or ICO format.

Free Fonts

  • Google Fonts (previously Google Web Fonts) – Search for free fonts. over 800 font families.
  • Font Squirrel – A great source for free fonts.
  • Abstract Fonts – Free simple icons for your next project.
  • DaFont – Archive of freely downloadable fonts.
  • FontSpace – Find and download legally licensed fonts. The site offers a collection of 67,000+ free fonts from over 2,900 designers.
  • 1001 Fonts – 22,167 free fonts in 11,870 families.
  • Urban Fonts – Download Free Fonts and Free Dingbats.
  • FontSpring – tons of free fonts for designers on a budget.
  • Fontsly – Big collection of Free Fonts for Download. Browse fonts by style, by type, by alphabet, by author or by popularity.

Free Textures, Backgrounds, & Patterns

Free quality free stock textures, backgrounds, and patterns. Most of the services require you to give attribution, please make sure you read the instructions on how to credit the authors properly.

100%-Free Stock Images

Find 100%-free stock photos and images contributed by designers around the world for your design needs. Most of the design materials are published under the “public domain”, or CC0 (Creative Commons Zero) licenses and are free for both personal and commercial use (You can use it for a wide range of projects whenever if its a website, template, print material, social post, or else). Some of the services require you to give attribution to the original photographer or the service provider so don’t forget to check the license info of each element you use. Make sure you know What is the difference between “Commercial Use”and “Editorial Use”.

    • FreeImages (License Info) – Browse over 300,000 free stock photos and find the perfect royalty-free image quickly.
    • Pixabay (License Info) – Get over 1.8 million high quality stock images and videos shared by the community.
    • StockSnap (License Info) – Hundreds of free high resolution stock images for creatives.
    • Unsplash (License Info) – Beautiful, free high-definition images and photos that you can download and use for almost any project with no attribution required.
    • Pexels (License Info) – Inclusive royalty-free stock of high-quality photos.
    • GratisoGraphy (License Info) – Hundreds of free high-resolution pictures you can use on your personal and commercial projects, free of copyright restrictions.
    • Burst By Shopify (License Info) – Free stock images that were shot by global community of photographers. Free use them for commercial use with no attribution required.
    • NegativeSpace (License Info) – High-Resolution free CC0-licensed stock photos.
    • Iconscout Photos (License Info) – Collection of 9K+ royalty free stock photos for personal and commercial use.
    • LibreStock (License Info) – A service that index the best free photos from the top stock sites, so that you can find that perfect image much, much quicker.
    • Motosha (License Info) – Image archive that offers free high quality stock photos.
    • FreeRangeStock (License Info) – Royalty-Free stock images. Totally free commercial photography and textures.
    • Vecteezy (License Info) – High-quality vector graphics for personal and commercial use.
    • PicJumbo (License Info) – Free high-definition vector graphics for personal and commercial use.
    • TWNSND (License Info) – Find free historical and vintage photos from the public archives. Most photos are available for commercial use, but to make sure check the link to the original Flickr post.
    • FocaStock Photos (License Info) – Curated collection of CC0-licensed images that can be used for free on commercial projects.
    • RawPixel (License Info) – Find free high-definition stock photos for personal or commercial use.
    • ISORepublic Images (License Info) – Curated collections of free high-resolution CC0 photos and videos.
  • KaboomPics (License Info) – Discover free stock photography. All photos or photoshoots are free to download for personal or commercial use, no attribution required.
  • ShotStash (License Info) – CC0 licensed stock photos for personal or commercial purposes.
  • FreeStocks (License Info) – Free stock photos under CC0 (Creative Commons Zero) license for creative professionals.
  • PikWizard (License Info) – Free library of over 1 million high quality stock photos. CC0 (Creative Commons Zero). safe for commercial use with no attribution required.
  • StockVault (License Info) – Collection of free stock images.
  • LibreShot (License Info) – Free archive of stock images for commercial use with no attribution required.
  • SkitterPhoto (License Info) – Free library of public domain photos free to use for any purpose with no attribution required.
  • DreamStime (License Info) – Large collection of high resolution royalty-free and public domain stock images provided by contributors from around the world.
  • VectorPortal – Free vectors licensed under the Creative Commons Attribution license 4. You can use the vectors for commercial projects by giving proper attribution.
  • VectorStock (Licensing) – Free vectors to use on your website design projects. attribution required.

100%-Free Illustrations

Find free beautifully designed SVG or PNG illustration images for your design projects (landing pages, blogs, email newsletters, and more). Don’t forget to check the license of each element you use.

  • UnDraw – Find open-source illustrations to use in any project, commercial or personal without attribution or any costs.
  • Iconscout Illustrations (License Info) – Browser free collection of 11K+ royalty free illustrations for personal and commercial use.
  • Icons8 Illustrations (License Info) – Browser free collection of 1K+ royalty free illustrations for personal and commercial use.
  • Lukaszadam – Free SVG illustration library. All images are MIT licensed and can be used completely free for commercial projects – no attribution required.
  • ManyPixels Illustrations – Discover MIT-licensed SVG illustrations. Free for commercial or non-commercial use.
  • PNGTree Illustration (License Info) – Free collection of illustration images. Can be used for both personal and commercial use.
  • DrawKit (License Info) – Free vector SVG illustrations to use in your web projects. No attribution required!
  • Humaaans – Free collection of people illustrations with a design library. Illustrations are CC0 licensed and can be used commercial or personal use.
  • Freepik’s Illustrations (License Info) – Free illustrations for your next project. You can animate them as well
  • GlazeStock (License Info) – Curated royalty-free illustration library for designers and developers. You can use all illustration for free with attribution.
  • Isometric (License Info) – Free collection of SVG isometric illustrations published under the MIT license that premits using for personal and commercial projects without the need for attribution.

100%-Free Stock Videos

Find free stock videos and clips in 4K and HD. All videos can be used for both noncommercial and commercial purposes. Videos are licensed under the Creative Commons Zero (You don’t have to give attribution), or Creative Commons 3.0 (must be attributed to the original author). Don’t forget to check the license info of each video.

Design Inspiration

Get updates on the latest design trends from designers around the world and get inspired by new creative ideas for your next web projects.

  • DeviantArt – Get inspired from professional designers community.
  • Behance – Discover new design trends with gallery of quality web designs.
  • Dribbble – Discover new design creatives from top designers and gain inspiration for your design projects.
  • Awwwards – An online resource for web design inspiration, that showcase awarded sites with great designs.
  • CSS Design Awards – Web design and development award platform that honors and showcases freelance designers, studios and agencies.
  • CSSNectar – A website design gallery for website design inspiration.
  • CollectUI – Get daily inspiration of hand-picked designs elements.
  • SiteInspire – Showcase of the great website designs.
  • TheBestDesigns – Discover the last web design trends.
  • BestWebsite.Gallery – Discover handpicked websites with beautiful design.
  • WebDesignerDepot – Get inspired by the freshest web designs worldwide.
  • Logopond – Logo design inspiration gallery.
  • LogoMoose – Logo inspiration and design community. Discover logos designed by professionals.
  • ScreenLane – Find the latest web and mobile UI design inspiration.
  • Tympanus – Collections of inspirational websites.

Live CSS Editors

Chrome extensions to easily inspect CSS properties or live edit CSS elements of webpages without the need of coding. Simply change the appearance of your webpage in real time with few clicks by adding custom CSS styles.

  • CSS-Spy – See the CSS attributes of any web element by simply hovering on it.
  • CSS-Peeper – Extract fonts, CSS, colors from websites.
  • Code-Cola – A free and simple chrome extension for live editing the css style of your webpages visually.
  • Amino – A free CSS live editor to make changes to your website look in real time. In order to inspect elements right-click on your webpage and select Amino from menu.
  • StyleBot – A free and easy to use CSS live editor to change the layout of your webpage quickly. In order to inspect elements right-click on your webpage and select Amino from menu.
  • Visual-Inspector – A free in-browser design tool that will help you to launch the perfect website. It allows you to inspect your website CSS code and change it in real-time to fix design bugs, moreover it you can extract website assets such as colors, fonts, and images.
  • VisBug – A free chrome extension for designers that provides many useful browser design tools including inspecting CSS style.
  • CSSViewer – A simple CSS properties viewer.
  • SnipCSS – Special chrome extension that allows you to extract CSS and HTML for any element on any website.

Detect Fonts

Detect the fonts that are used on website text or images.

  • WhatTheFont – Detect font from an image.
  • WhatFontIs – Find any font from any image. In order to detect the font this service is using 600K+ fonts (commercial or free) and font finder AI.
  • WhatFont – Easily get font information about the text you are hovering on.
  • Fount – Identify any web font you see in the browser.

Color Pickers/

Read colors or extract complete color schemes from any website or image.

  • Firefox Eyedropper – Build-in tool in Firefox that enables you to select colors in the current page.
  • ColorZilla – Free eyedropper browser extension to read colors from any point in the browser. Also offers a Webpage Color Anylazer to extract all the colors used in a webpage, Color Picker, and Palette Browser.
  • 10BestDesign Color Picker – An image color picker tool that generates a Hex color palette from an image.
  • Eye Dropper – Open-source simple eyedropper chrome extension that allows you to pick a color from a webpage.
  • ColorPick – A chrome extension to detect colors on any website. Very precise tool. If you make a profit using this tool you are required to buy license.
  • Site Palette – A free colour scheme extraction browser extension to generate comprehensive color palettes from any website.


  • Brusheezy – Free Photoshop Brushes & PSDs.
  • TWBSColor – Generate your own Bootstrap navbar.
  • Animista – Get a collection of ready to use CSS animations.
  • Checklist.Design – Collection of design practices checklists ranging from website pages, to UI component.
  • Colour Contrast Checker – Check the contrast ratio of two different colors against WCAG standards.
  • Contrast-Ratio – Check contrast ratio of the text and background colors of your website.
  • Coolors Contrast Checker – Calculate the contrast ratio of text and background colors.
  • Snatchr – Identify the styles and colors used in any website.
  • Radaar’s Email Newsletter Builder – Free e-mail newsletter builder to easily create professional e-mail templates.
  • Radaar’s Background Remover – Free remove background tool to automatically remove the background from your photos.
  • Fontjoy – Find the best combination for your designs.

That’s it! Hope you found our free web design tools collection helpful. if you have any suggestions please feel free to contact us by email.

Share via