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, improve visitors experience, and amaze them with ready-made or your own customized 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 probably won't want to miss it!
This article won't give you the answer to which are the best free web design tools. You'll have to figure it 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.
Image Optimization Tools
Image optimization tools allows you to make your website faster and save bandwidth by compressing or resizing your images.
Compress your image without losing quality.
- 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 compressor to optimize your PNG files and reduce their 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.
- Kraken Image Optimizer – Free online image optimizer by Kraken.io, free edition offers only compressing of images.
- Squoosh – Free online image compressor and resize. Easily compress images right in your browser.
- Compress-or-Die – Online image compressor and resizer for design professionals.
- Compressor (Free Plan) – Online Image compression tool to optimize JPEG, PNG, SVG, GIF, and WEBP. Free plan is limited to 50 compressions per day.
Image Resizing Tools
Use these tools to change the dimensions of your images, resulting in a lower file size.
- ResizeImage – Free online image resizer.
- PicResize – Free, easy to use online image resizing tool. You can crop, resize, and edit any image from your PC or a URL.
- iLoveIMG Image Resizer – Resize JPG, PNG, SVG or GIF by defining new height and width pixels. Change image dimensions in bulk.
- Img2Go – Free online image compressor and resize tool. Reduce the size of an image or resize it to a new dimension.
- ResizePixel – Free online image editor. You can crop, resize, flip, rotate, and convert images for free.
- BIRME – Easy to use and free bulk image resizer.
If your images are too blurry, and have low resolution, you can use image upscalers to increase the resolution of your images up to x8 without losing quality (also known as "super-resolution", duplicating pixels). At the same time, some can also enhance photo quality using special optimizers. Today, most image upscaler tools are powered by artificial intelligence, which provide accurate results compared to traditional tools.
- Zyro's Image-Upscaler – AI-powered image upscaler to enhance and enlarge images.
- ImgUpscaler – AI-powered photo enlargement solution to increase image resolution without losing quality.
- ImgLarger – Image upscaling tool that uses "Super-Resolution" technology to upgrade your low-resolution photos up to x8 by inserting pixels into the image.
- Image-Upscaler – Unblur images with AI image upscaler.
- BigJPG – Free AI image enlarger to increase images resolution while keeping image quality.
- Depositphotos's Upscaler – Free AI-powered image upscaler to enlarge images without losing quality.
- ImageResizer's Enlarger – Easy to use photo enlarger tool to make photos bigger.
- PhotoenLarger – Free online tool to increase resolution of your images.
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.
- ColorDrop – Discover curated colors, and palettes.
- FlatUIColors – Discover more than 200 handpicked flat ui colors.
- 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.
- GradientHunt – Use (or generate) beautiful color gradients for free from handpicked collection for designers and developers.
- UIGradients – Find color gradients in a curated collection. Get inspired by thousands of trendy hand-made color gradients.
Easily create new design elements such as buttons, menus, ribbons, backgrounds, and more…
- Button Generator – Create HTML and CSS Button Styles.
- CSS3 Button Generator – Simple CSS3 button generator.
- ClickMinded Button Generator – A free call-to-action (cta) button generator by Da Button Factory (acquired by ClickMinded), to use on your website, or any other platform you wish.
- CSS Button Generator – A free button design tool.
- Tutorial Republic’s Bootstrap Button Generator – A free bootstrap button generator to create button with font awesome icons fast and easy.
- Usepastel’s Box Shadow – Free beautiful CSS box shadows.
- 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.
- FormCake (Free Plan) – Form backend to collect submissions built for developers. Free plan allows creating unlimited forms and limited to 100 submissions per month.
- FormSpark (Free Plan) – Form backend for to collect submissions and get them directly in your email inbox. Free plan allows creating unlimited forms and limited to 250 submissions per month.
- JotForm (Free Plan) – Online form builder to create professional-looking forms with ease. Free plan is limited to 5 forms, 100 monthly submissions, and 1,000 monthly form views.
- CognitoForms (Free Plan) – Online form builder to simply build powerful forms from surveys to complex registration forms. Free plan allows creating unlimited forms and is limited to 500 monthly submissions.
- FormSpree – Free form backend to simply create simple contact us forms and get user feedback directy to your inbox.
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 HTML site templates and themes. You might be wondering what 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.
Find free SVG & PNG icons for your projects from and for designers and developers around the world. Some 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)
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 customizable 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.
- 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.
- 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.
- TextureKing – Free texture stock resources.
- Toptal Subtle Patterns – A free high quality texture stock library for both personal or commercial use. All patterns are licensed under CC BY-SA 3.0 which means you should credit Toptal Subtle Patterns using a comment in your HTML or CSS code.
- Lost and Taken – Free texture stock photos.
- Free Stock Textures (License Info) – Free collection of textures, backgrounds and patterns.
- PNGTree Backgrounds (License Info) – Free backgrounds to use for commercial use.
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 it's a website, template, print material, social post, or else). Some 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. All images are under Creative Commons CC0 license that allows both personal and commercial.
- 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.
- OpenVerse (License Info) – Free Creative Commons or public domain images to use freely on your website.
- 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 (License Info) – Free vectors to use on your website design projects. Attribution required.
- PxHere (License Info) – Free photos under the Creative Commons Zero (CC0) license. No attribution required.
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 permits 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.
- Videezy (License Info) – Free HD stock video footage.
- Videvo (License Info) – Browse over 70K hand-picked free stock videos in 4K and HD.
- FocaStock Videos (License Info) – Find free HQ stock short video clips.
- ISORepublic Videos (License Info) – Royalty-free CC0 stock videos.
- Mazwai (License Info) – Stunning free stock video footage. Hand-picked by experts.
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.
- Typ.io – Collections of font pairing.
- FontPair – Collections of font combinations. Get font pair suggestions from all over the web. You can also generate fonts here.
- FontsInUse – Archive of typography (that was contributed by the public) indexed by typeface, format, industry, and period.
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 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.
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 Analyzer 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 color scheme extraction browser extension to generate comprehensive color palettes from any website.
- Img2CSS – Useful tool that allows you to convert any image to pure CSS or Base64 image embedded inside the '' tag.
- 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.
- Herokuapp CSS2SASS – CSS to SASS/SCSS (syntactically awesome stylesheets) converter.
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.