Free Web Design & Development Resources

There’s an abundance of free resources available online that can help you with website design and development. Check out some of the best below. Please note, this is an ever-evolving list, so apologies for any omissions or broken links.

Are there any resources that you think should be added or removed? Or, are there any links that aren’t working correctly? Please let me know!

Find this resource page helpful? Please feel free to share.

Planning and Creative Resources

Design Inspiration

Speckyboy: 50 Perfect Examples of Flat Web Design – flat web design inspiration

One Page Love – one page website design inspiration and templates

Land-book – website design inspiration

LandingFolio – examples of product landing pages

Best Website Gallery – website design inspiration

SiteInspire – web and UI design inspiration

Awwwards Product Pages – product page design inspiration

Hubspot Product Page Design Examples – product page design inspiration

SAAS Websites – design inspiration for Features pages

Dribbble – web design and graphic design inspiration

Awwwards Collections – very well designed UI web design elements

Calltoidea – inspiration for a variety of functional web design elements

Behance – graphic design inspiration

UI Design – Pinterest – mobile app UI design inspiration

Pttrns – mobile UI design inspiration

HTML, CSS, Bootstrap Templates

Colorlib – 93 HTML website templates

Free CSS – CSS website and menu templates

HTML 5 UP – website templates

HTMLTemplates.co – website templates

One Page Love – single page Bootstrap templates

Templated – responsive HTML and CSS templates

Tooplate – Bootstrap templates

WPAmelia.com – landing page templates

Bootswatch – very basic Bootstrap themes

Freebiesbug – HTML templates and other resources

CSS Grid Generator – create custom grid setup

UI Cloud – UI design resources and templates, for both sites and functional site elements

PixelBuddha – website templates

Venus – free responsive landing page HTML template

Responsive Grid System – fluid grid system, alternative framework to Bootstrap

Speckyboy – 10 free pure CSS carousel sliders

Mobirise – free Bootstrap carousels

Slick – free carousel code

WordPress Themes

What WP Theme Is That – enter a URL and see what theme and plugins are being used

Just Free Themes – free themes

Athemes – free themes

CodeInWP – free themes

Colorlib – free themes

Hostinger – free themes

HubSpot – free themes

SpeckyBoy – collections of free WordPress themes

Mobile templates and resources

Dribbble – mobile templates and resources

InVision – mobile UI kits

Sketch App – mobile UI kits

Sketch App – mobile wireframes

Colors

Color Picker – color palette for initial color ideas

Material Design Colors

Pickr – simple tool to select colors and transparency and get the Hex or RGBA code

CopyPalette – create a color palette of darker and lighter shades of a particular color

HTML Color Picker – easily create lighter and darker shades of a particular color

Paletton – tool for identifying similar color combos

Adobe Color – play around with color combos

Coolors.co/app – color scheme generator

Color Hunt – color palette inspiration

LOL Colors – color palette inspiration

Social Media Colors – social media colors

BrandColors – collection of official brand colors

Palette Creator – Chrome plugin that creates color palette from images. Once installed, just right-click an image and select Palette Creator. Awesome tool!

PaletteGenerator – upload a photo and generate a color palette

Canva – Color Palette Generator – upload a photo and generate a color palette

Online color picker – web-based color picker tool, just upload an image

Gradients

CSS Gradient – easily create a gradient and get the CSS code

Gradient Magic – unique CSS gradients

Web Gradients – 180 linear gradients

Colorful Gradients

uiGradients – gradient generator

Backgrounds

DBF – background images from Dribbble and Behance

Freebbble – backgrounds from Dribbble

GraphicBurger – backgrounds

Hoard – large collection of backgrounds and background generators

PixelBuddha – textures and textural overlays

Cool backgrounds – compelling, colorful images for backgrounds

Trianglify.io – create triangle-based background patterns

Texture King – textured images

Patterns

Hero Patterns – collection SVG background patterns with customizable colors

Toptal – subtle patterns

The Pattern Library

Tartanify – collection of tartan patterns

Paaatterns – vector patterns for download

PixelBuddha – patterns

Patternico.com – create your own patterns using Font Awesome icons

Photos

Large repositories

Burst

Canva Free Photos

Flickr – filter for images that allow various license types

FreeImages

FreePhotos.cc

FreePik

Free Range Stock

Google – search images, and used advanced settings to select images that have usage rights set to “free”

Gratisography

IM Creator – really well stylized photos

IsoRepublic

Kaboompics

Morgue File

Pexels

PicJumbo

Picography – browse by category

Picspree

Pikwizard

Pixabay

Public Domain Photos

Rawpixel

Reshot

RGB Stock

Stock Up

StockSnap

StockVault

Unsplash

Niche collections

Foodies Feed – food images

Free Nature Stock – nature photos

Gratisography – quirky, creative photos

New Old Stock – vintage photos

Styled Stock – feminine stock photography

Travel Coffee Book – travel pics

Smaller collections

Cupcake.nilssonlee.se/ – outdoor and travel images

Designer Pics – stylized photos

Refe

ImageFree

JE Shoots

Kaboom Pics

Life of Pix

FOCA

SplitShire

Videos

Mazwai

FOCA

Vector Graphics

Vecteezy

VectorStock

Free Vector

365 PSD – .PSD, .AI, and .EPS vector images

PixelBuddha – vector images

Glaze – free illustrations and backgrounds

Freellustrations – vector background images

Freepik

Dribbble Freebies

Isometric – free isometric illustrations

IRA Design – build your own illustrations with free pre-existing gradient images

Undraw – vector image gallery that you can customize with colors

PSD Graphics

FreePik

365 PSD

Freebiesbug – templates, mock-ups, designs, icons

Brusheezy – Photoshop brushes and graphics

Animation

Dribbble – animations

Freebbble – animations from Dribbble

Fonts

Google Fonts

1001 Free Fonts

DaFont

FontSpace

Font Squirrel

DBF – fonts from Dribbble and Behance

Freebiesbug

PixelBuddha

UI Space

Font Tools

What the Font – font finder to figure out what font is being shown

Font Pairing Tool – see how fonts look together

Logos

Pixel Buddha – logo templates

Logopond – logo inspiration

PlaceIt – see how your logo looks on shirts, devices, mugs, etc.

Icons

Large collections

Freepik – 83,000 icons

IconFinder – 14,000 icons

IconMonster – 4,000 icons

Flat Icons – 2,500 icons organized by category

Font Awesome – 1,500 icons organized by category

GraphicBurger – large collection of icon collections

PixelBuddha – large collection of icon collections

Fontello – large collection of icons

Material.io icons – large icon collection

GlyphSearch – huge icon repository

The Noun Projects – huge icon repository

Icons 8 – Line Awesome

Icofont – 2,100 icons

Round icons – free vector icons

Icon Scout

Sketch App – icon collections

UI Space – collection of icon sets

Freebiesbug – vector icon collections

Smaller collections

CSS Icon

Endless icons

Entypo

IconSweets

Ion Icons

Material Design icons

Octicons – a GitHub-themed icon collection

Remix Icons

To icon

Favicon Generator

Real Favicon Generator

Additional Graphic Tools and Resources

Convert2svg – convert an image to svg format

Generated Photos – 100,000 AI-generated faces

Facebook.design/devices – images of lots of different screens and mobile devices with a blank monitor, so you can show how your site looks on a device

CSS Duotone – generate duotone images from photos with CSS

Photo Filter Playground – upload a photo and easily play with various filters

Promo Image Resizer – easily resize photos, including presets for common social media sizes

Blobmaker – generate organic images with varying complexity

PixelZoomer – a measuring tool to easily see how many pixels tall or wide objects are on a website. Like a measuring tape for your browser.

CreepyFace – make your face follow a pointer on screen


Development Resources

Image Compressors

Optimizilla – easy to use image compressor

Compressor.io

Tinyjpg.com

Tinypng.com

HTML Resources

W3 Schools complete HTML reference

List of HTML special characters (e.g. ampersand, quotes, etc.)

CSS Resources

Complete CSS reference guide

CSSReference.io – visual guide to CSS

CSS Cheat Sheet – reference resource

Important CSS selectors

CSS Layout Patterns

CSS Matic – easily create and play with border radius, gradients, box shadows and noise textures

Brumm.af – create custom box shadows

Hover effects – great hover effects for photo thumbnails

CSSeffectsSnippets – CSS for hover effects and other animations for buttons and links

CSSFX – simple click-to-copy CSS effects

EnjoyCSS – advanced CSS generator

Hamburgers – CSS for custom hamburger animations

Fancy Border Radius – create unique shapes using border radius in CSS

CSS Clip-path maker – create complex shapes in CSS

Animate.css – CSS animations

Simple Scroll Snapping Carousel for Flexbox/Grid Layout

CSS layout cheat sheet

CSS selectors cheat sheet

CSS click chart – quickly visualize what various CSS selectors do

WordPress Plugins

All-in-One WP Migration – makes it easy to migrate your entire site between a local and staging environment

All-in-One WP Security & Firewall – A comprehensive, easy to use, stable and well supported security plugin

Autoptimize – makes optimizing your site easy

Broken Link Checker – monitors your site for broken links

Compress JPEG & PNG images – automatically optimize images

CSS Hero – very easily change and edit CSS

Disable Comments – easily disable comments

Elementor – live page builder

Envira Gallery – awesome Image Gallery

Google Fonts Typopgraphy – easily use Google Fonts

Header and Footer Scripts – easily add Javascript to your WordPress site

LiveChat – add live chat to WordPress websites

MonsterInsights – Google Analytics plugin

Relevanssi – better search engine for your WP site

Sassy Social Share – social media share buttons

SeedProd – create custom coming soon or maintenance pages

Smush It – WordPress plugin

Sucuri – security plugin

Updraft Plus – automatic website backup

WP Forms – easy to use form builder

WP Mail SMTP – make sure people get emails from your website

XML Sitemap – plugin to improve SEO by creating sitemaps to be indexed by search engines

Yoast SEO

Miscellaneous Web Development Resources

Generate random user profiles

Can I Use -see if you can use certain HTML and CSS technologies in different browser versions

10 Minute Mail – temporary email

Photofeeler – get feedback on a personal photo

Shopify Slogan Maker

TinyCert – free SSL certificates for your startup


Testing Resources

Functionality Testing

Responsinator – preview your website on multiple mobile devices at once

Mobile-friendly test – is your web page mobile friendly?

Browser Shots – test your web page looks in different browsers

Site Optimization

Google Developers PageSpeed Insights

HTML Validation

Minify CSS code

Minify JavaScript code


Tools and Software

Code Editors

Brackets

Visual Studio

Photoshop Alternatives

Gimp

Krita

Fire Alpaca

Medibang Paint

Photopea

Pixlr

Illustrator Alternatives

Inkscape

Boxy SVG

Vectr

Gravit

Figma

InDesign Alternatives

Scribus

Canva

Animation

Open Toonz

Krita

Pencil 2D

Fire Alpaca

LightRoom Alternatives

RawTherapee

Darktable

Dreamweaver Alternative

Aptana

After Effects Alternative

Blender

Table of Contents