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
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
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
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
Flickr – filter for images that allow various license types
Google – search images, and used advanced settings to select images that have usage rights set to “free”
IM Creator – really well stylized photos
Picography – browse by category
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
Videos
Vector Graphics
365 PSD – .PSD, .AI, and .EPS vector images
Glaze – free illustrations and backgrounds
Freellustrations – vector background images
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
Freebiesbug – templates, mock-ups, designs, icons
Brusheezy – Photoshop brushes and graphics
Animation
Dribbble – animations
Freebbble – animations from Dribbble
Fonts
DBF – fonts from Dribbble and Behance
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
Icofont – 2,100 icons
Round icons – free vector icons
Sketch App – icon collections
UI Space – collection of icon sets
Freebiesbug – vector icon collections
Smaller collections
Octicons – a GitHub-themed icon collection
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
HTML Resources
W3 Schools complete HTML reference
List of HTML special characters (e.g. ampersand, quotes, etc.)
CSS Resources
CSSReference.io – visual guide to CSS
CSS Cheat Sheet – reference resource
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 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
Miscellaneous Web Development Resources
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
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
