Web Design

Over time we have collected many interesting and essential web design tools and graphic resources every freelance 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 of all 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.

CSS Frameworks

CSS frameworks are sets of ready-made CSS stylesheets that simplify the process of creating web projects. By using these frameworks, you can guarantee that your projects adhere to the latest design standards. Even novice design developers can utilize these frameworks without needing any prior CSS knowledge.

Component-Based

General purpose CSS frameworks for front-end developers.

  • Bootstrap – A free and open-source front-end framework that is packed with powerful and extensible features to build and develop elegant, fast, and responsive mobile first projects on the web. It's developed by Twitter, and is probably the most popular CSS framework on the web.
  • Bulma – Modern CSS framework that offers a variety of frontend components that can be seamlessly integrated to create visually appealing and user-friendly web interfaces with responsive design.
  • Foundation – A flexible and customizable framework that helps front-end developers in designing responsive websites, apps, and emails that are visually appealing on all types of devices.
  • Milligram – A minimalist CSS framework.
  • Semantic-UI – A framework to design sleek user interface with ready-made 50+ UI components. You can also check the official community fork Fomantic-UI.
  • BlazeUI – An open-source UI toolkit that offers a solid framework for fast and efficient website development with scalability and maintainability.
  • PureCSS – A versatile set of CSS modules created by Yahoo, that can be utilized in any web project.
  • UIkit – A lightweight front-end framework to help developers to build fast and responsive websites.
  • PicniCS – A lightweight and simple CSS library.
  • Skeleton – A tiny CSS library for small web projects.
  • Materialize – A CSS framework that is inspired by Google's "Material Design" scheme.
  • Material Framework – A CSS framework that enables the integration of Material Design by Google into web pages and web apps.

Utility-Based

Frameworks that utilize the utility-first approach provide you with low-level minimal utility classes, in which each class performs only one design action on an element. The class name gives a clear indication of the functionality it provides (For example, class="bg-yellow text-blue text-center font-bold flex rounded border-black"), unlike component-based frameworks that provide out-of-the-box prebuilt CSS components. Therefore, utility-based frameworks are more customizable than component-based frameworks, but require more design work because you have to build the components from scratch (by combining utility classes).

  • TailwindCSS – Tailwind CSS is a utility-first CSS framework designed to make building modern websites faster and easier. It offers a set of utility classes to design sleek and responsive websites. TailwindCSS offers two user interfaces (UI) with pre-build components, which makes it similar to Bootstrap. One UI is called TailwindUI and you'll have to pay in order to use it, the second one is HeadlessUI which is offered for free. Alternatively, you can use free UI extensions such as: daisyUI, Preline UI, SailUI, Float UI, or HyperUI.
  • Tachyons – A lightweight utility-first CSS framework for building fast and responsive interfaces.
  • BassCSS – A low-level CSS toolkit.
  • Open-Props – CSS custom properties for faster and consistent design.

Class-Free/Classless or Class-light

With classless frameworks, you won't have to use any pre-defined classes or do anything, you'll have just to use semantic HTML (f.e. instead of using <div<, you should use <header<, <nav<, <button<, <footer<, <p<, etc...). Class-light frameworks are hybrids between classless and utility-based frameworks.

  • Picocss – A lightweight CSS framework for semantic HTML that allows you to create responsive design system.
  • MVP – A minimalist stylesheet for HTML elements
  • NewCSS – A classless CSS framework to build modern websites using only semantic HTML.

Image Optimization Tools

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

Image Compressors and Optimizers

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 to easily compress images right in your browser., free edition offers only compressing of images.
  • Squoosh – Free online image compressor and resize that allows you to choose different compression codecs and compare them right in your browser.
  • Compress-or-Die – Online image compressor and resizer for design professionals.
  • Compressor (Free Plan) – Online image optimizer to optimize JPEG, PNG, SVG, GIF, and WEBP files. The free plan is limited to 50 compressions per day.
  • JPEG.io – Online tool powered by Kraken.io, that will convert almost any image format to JPEG and optimize it.
  • SVG Optimizer – Optimize and clean up SVG code.

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.

Image Upscalers/Enlargers

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.
  • Upscale.Media - Free online tool that uses AI technology to upscale and enhance images up to x4. This tool is free only for personal use.

Background Removers

Special tools to remove background from images. No design skills needed.

  • Adobe’s Background Remover – Free tool from Adobe to easily remove backgrounds from your photos.
  • PhotoRoom’s Background Remover – Free background removal tool to easily get a transparent background for your photos.
  • Erase.BG – Online AI background remover tool to precisely erase background from images. This tool is free only for personal use. The free plan offers 45 free credits every month.
  • PicWish – Online image background remover that uses a clever AI to convert any image background to a transparent background.
  • Depositphotos’s Background Remover – Free background eraser powered by AI to automatically remove backgrounds from images and make them transparent.
  • Clipdrop – Background removal solution to accuratly remove the background of any image.

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.
  • Hue.Tools – An open-source toolbox for colors, including a free color mixer, blender, info and modifier tool.
  • Muzli Colors – Free color palette generator to create color schemes easily.
  • Colorsinspo – Collection of beautiful color palettes.

Element Generators

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

Mutiple Type

  • EnjoyCSS – An advanced CSS3 generator with a simple user interface to generate quality CSS elements and styles effortlessly.
  • Creative-Tim's Bootstrap 4 Cheatsheet – A convenient online tool for effortlessly generating Bootstrap elements.

Buttons

Shadows

Seperators

Backgrounds

Patterns

Use patterns for your website backgrounds, branding 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.
  • Pattern-Monster – A very easy to online tool to generate and create repeatable SVG patterns.
  • HeroPatterns – A free source of repeatable SVG background patterns.
  • CSSGradient – A free css gradient generator tool to create colorful gradient backgrounds.
  • JoshwComeau's Gradient Generator – Create beautiful gradients with a few clicks.
  • SVGBackgrounds – A free gallery of SVG backgrounds and patterns. Every background can be edited to fit your needs and match your brand colors. The assets are under the CC BY 4.0 license, which means you can use it on personal or commercial projects but you have to give an attribution.
  • BGJar – A free svg background generator.
  • WickedBackgrounds – A free online svg background generator to create beautiful SVG backgrounds.
  • PatterNinja – A tool to create patterns from images.
  • FFFuel (License) – Access wide selection of free color tools and SVG generators for creating gradients, patterns, textures, shapes & backgrounds.
  • Loading.io – Create animated vector backgrounds in SVG or PNG format. Also check out Loading Patterns.
  • MagicPattern – Create beautiful pure CSS background patterns. Check all design tools offered by MagicPattern: MagicPattern Tools.
  • Haikei – An online design tool that will generate many types of SVG backgrounds such as blobmaker, wave generator, blurry gradient generator, layered waves.
  • SuperDesigner’s Pattern Generator – A tool to generate unique svg backgrounds.
  • Delaunay Triangulation Pattern Maker – Create beautiful pattern images created from Delaunay triangulation.
  • NoiseTextureGenerator – Create noise texture generator.

Tables and Grids

Forms and Surveys

  • Web3Forms (Free Plan) – Create contact forms for static websites. Form submissions are delivered directly to your mailbox without using a server or back-end. The 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. The 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. The free plan allows creating unlimited forms and is 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 directly to your inbox.
  • TypeForm (Free Plan) – Online form builder that will help you to quickly create beautiful, user-friendly and interactive forms, quizzes and surveys. No coding needed. Free plan offers unlimited typeforms, and limited to 10 questions per typeform, 10 responses per month
  • SurveyMonkey (Free Plan) – Simple survey builder to create advanced surveys online. Free plan allows you to build unlimited surveys, but is limited to 10 questions per survey, and 10 responses per month.
  • QuestionPro (Free Plan) – Easy to use survey to create your survey in seconds. Free plan allows you to create unlimited surveys and limited to 300 responses per survey.
  • Gozen (Free Plan) – Easy-to-use online forms tool with 170+ pre-built form templates, to collect data from users. Free plan allows you to create up to two forms and limited to 100 responses per month.

Misc

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/UI Kits/Admin Panels

Free HTML site templates and themes. You might be wondering what the difference is between "template" and "theme". Right? A theme is a complete design of your website that contains all the design elements, while a template provides a different page design for special/certain pages on your website. Most of the themes/templates include a 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 include a backlink to BootstrapMade)
  • StartBootstrap (License) – Free open source Bootstrap themes and templates. You can also grab free Bootstrap snippets for your projects. All materials are licensed under the MIT license.
  • UIDeck (License) – Access a wide range of modern templates and UI kits that are readily available for use in a variety of web projects, including HTML, Bootstrap, Tailwind, and React.
  • 3RDWaveMedia Themes (License) – 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.
  • Creative-Tim – Collection of free themes & templates developed by Creative Tim.
  • TemplateMonster – Free modern HTML/Wordpress templates for personal use. In order to download the free templates you must share the link on social networks.
  • Uiverse.io – A stunning collection of open-source UI components, beautifully designed by designers around the world. All elements are available for use in both non-commercial and commercial projects under the MIT license.
  • UnicornUI (License) – Design platform that aims to simplify your design workflow by having all your creative assets conveniently stored in one place.
  • revKit – Free modern design system UI Kit with over 50 ready-to-use components and over 200 symbols. The UI kit is available for both commercial and personal projects.
  • TailGrids (License) – Get access to a collection of 500+ free Tailwind CSS UI components, blocks, and templates available for personal and commercial use.
  • TailAdmin (License) – An open source Tailwind CSS-based admin dashboard template.
  • Bootstrapious – Free collection of fully responsive Bootstrap templates and themes. You can also get free Bootstrap snippets.
  • Figma Community – Discover a wide range of free templates, plugins, and UI kits for Figma.
  • Froala's Design Blocks – Over 150 responsive and attractive bootstrap-based blocks to enhance your web projects.
  • AdminMart – Free admin templates by AdminMart. Free web templates are also available.
  • ThemeWagon Freebies (License) – Get free responsive HTML and Bootstrap themes.
  • Lapa.Ninja Freebies – Free design resources for web projects.

Free Icons/Symbols/Cliparts

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)

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.
  • HeroIcons – 200+ hand-crafted MIT-licensed SVG icons, by the makers of Tailwind CSS.
  • TablerIcons – Over 4K free SVG icons for commercial use.
  • 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.
  • Mono Icons – A simple open-source icon set.
  • 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 over 500 hand-crafted line icons for designers and developers developing modern user interfaces.
  • IconPark – Free 1,200+ high-quality icons.
  • Bootstrap Icons – Free library of high quality, open source icons.

Image Icons

  • Icons8 (License Info) – Download free icons for free.
  • Noun Project – Over 2 Million curated icons, created by a global community.
  • UXWing (License Info) – 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 (License Info) – Search through 2 Million+ Icons and Images from 1200+ Contributors.
  • GraphicBurger (License Info) – 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 (License Info) – A library of free vector icons for personal and commercial projects, designed by first-class designers.
  • IconBros (License Info) – Over 260 collections (12K) of free PNG image, SVG vector icons for commercial and personal use.
  • VeryIcon (License Info) – Icon search engine. You can download icons in SVG, PNG or ICO format.
  • MediaLoot (License Info) – Free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only)

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 to use on your web projects, printing and UI designs. 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 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.
  • 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.

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 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.

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.
  • SaaSLandingPage – Explore a collection of SaaS landing page examples that will inspire your creative process for your upcoming design project.
  • TheBestDesigns – Discover the last web design trends.
  • BestWebsite.Gallery – Discover handpicked websites with beautiful design.
  • WebDesignerDepot – Get inspired by the freshest web designs worldwide.
  • Land-Book – Gallery of hand-picked website design inspiration.
  • 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. There are also landing page design inspiration available.
  • Tympanus – Collections of inspirational websites.
  • Httpster – Discover a curated showcase of beautiful website designs.
  • Lapa.Ninja – Discover a gallery of landing page designs.
  • LandingFolio – Get inspired by curated list of real landing page examples.
  • WebDesign-Inspiration – Get free ideas and inspirations from website designers around the world.
  • Typ.io – Collections of font pairing.
  • FontPair – Collections of font combinations. Get font pair suggestions from all over the web.
  • FontsInUse – Archive of typography (that was contributed by the public) indexed by typeface, format, industry, and period.
  • Muzli Inspiration Search Engine – A web-wide search engine for design inspiration. You can also get inspired by Design inspiration collections.

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, no technical knowledge is required.

  • 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-CSS-Editor – 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. Please notice that this extension will not work for WordPress websites, for that you'll have to buy their special plugin.
  • 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.
  • Web Editor – Allows you to explore and manipulate the elements of any website, giving you the ability to customize their properties, insert new content, and design them exactly as you envision.

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/Extractors

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. The browser extension also have a "webpage color analyzer" feature to extract all the colors used in a webpage, and a 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.
  • Unstack Style Guide – Identify the styles and colors used in any website.

Logo Generators

Create simple logos for your brand.

  • LogoCreator – Online logo maker to create custom logo designs for free in couple of minutes.

Miscellaneous


  • Img2CSS – Useful tool that allows you to convert any image to pure CSS (by using only box-shadow property) or to an Base64 image.
  • Brusheezy – Free Photoshop Brushes & PSDs.
  • Animista – Get a collection of ready to use CSS animations.
  • Avif.io – Handy tool to convert any image to the modern AVIF (or AV1) format.
  • 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.
  • Colorable – A color combination contrast tester tool to find safe color combinations.
  • Coolors Contrast Checker – Calculate the contrast ratio of text and background colors.
  • Radaar’s Email Newsletter Builder – Free e-mail newsletter builder to easily create professional e-mail templates.
  • 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.