Resources
Updated on March 30th, 2026
A list of useful web design resources for your next creative project.
I’ve been collecting them since I started my design/developer journey. I either used them myself or plan to do that for my future projects. I find these resources amazing and I’d like to share them with you.
Disclaimer: all these links are NOT sponsored, they are recommended based on my own personal experience. No responsibility for the content of linked third-party websites.
Browse by categories:
Patterns & Shapes
Hero Patterns
A collection of repeatable SVG background patterns.
Patternify
CSS pattern generator.
Paaatterns
Free collection of beautiful patterns for all vector formats.
Blobmaker
Free generative design tool to help you create random, unique and organic-looking SVG shapes.
Blobmixer
A toy for creating and sharing 3D blobs.
Fancy Border Radius Generator
Create organic looked shapes with border-radius in CSS.
Fancy Border Radius Generator Full Control
Create organic looked shapes with border-radius in CSS – 8 point full control.
Pattern Generator
Use this tool to create unique, seamless, royalty‑free patterns.
Pattern CSS
Fill your empty background with beautiful patterns.
Free Stock Textures
A library of free textures to create outstanding projects.
Transparent Textures
A collection of beautiful transparent textures.
Tabbied
Create beautifully generated patterns or artwork to use for wall art, websites, print materials and more.
Noise Texture Generator
Generate a noise texture pattern easy and fast.
Nnnoise
SVG noise generator tool.
Make Some Waves
A free SVG wave generator.
Svg Shape Generator
A free tool made by Softr for creating random organic-looking shapes.
Polygon Shapes
Polygyon shapes with clip-path property.
Doodad Pattern Generator
Use this tool to create unique, seamless, royalty‑free patterns.
Shapefest
A massive library of free 3D shapes.
CSS Stripes Generator
Pure CSS stripes generator.
Omatsuri
Open source browser tools for everyday use.
Smooth Shadow
A CSS smooth shadow generator.
CSS Arrow Please
Create and export CSS code for a custom box with an arrow extending out from the side.
Flow Lines
A tool for generating flow line representations using SVG paths.
MagicPattern
Beautiful pure CSS background patterns.
More.graphics
Unique and Free Generator Tools in One Place.
Shape Divider
Free tool to create custom shape divider.
CSS Clip-path Maker
Make complex shapes in CSS by clipping an element to a basic shape.
SVG Shapes
A collection of 120+ basic SVG shapes for your upcoming project.
CSS Pattern
A collection of background patterns made with CSS gradients by Temani Afif.
Colors & Gradients
CSS Gradient Animator
A CSS generator used to create animated backgrounds.
CSS Gradient
A free tool that lets you create a gradient background for websites.
Gradient Magic
A Free Gallery of Fantastic and Unique CSS Gradients.
UI Gradients
A collection of beautiful color gradients.
Color Gradient Generator
CSS color gradients for backgrounds and UI elements.
Easing Gradients
Make a smooth gradient without hard edges.
Optimal Overlay Finder
Readable text on a background image.
Gradient Buttons
Gradient buttons with background-color change.
Data Color Picker
Palette generator for charts and dashboards.
Adobe Color Contrast Checker
Ensure your color choices are visually accessible.
WebAIM Accessibility Contrast Checker
An online tool to test the contrast ratio.
0to255
A color tool for finding lighter and darker colors based on any color.
Contrast Ratio
Check if your colors have an acceptable contrast ratio.
Color.review
A modern tool for exploring and finding accessible colors.
Accessible Palette
Create color systems with consistent lightness and contrast.
WhoCanUse
A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.
Tanaguru Contrast Finder
Checks and finds contrast.
Button Contrast checker
Test if your buttons have enough contrast and are compliant with WCAG 2.1.
ColorSpace
The perfect color palette generator.
Adobe Color
Create color palettes with the color wheel or image.
Coolors
The super fast color schemes generator.
Colors.lol
Overly descriptive color palettes.
CopyPalette
Create your SVG palette and use it in Figma/Sketch.
ColorHunt
Find a great color palette.
HappyHues
Curated colors in context.
Accessible Color Generator
A tool for create accessible color palette.
Background Gradients
Highly customizable background gradients.
Branding Colors
A collection of hand-curated color palettes best fitted for branding.
Randoma11y
Accessible color combinations.
Mesher by CSS Hero
A Free tool to create beautiful mesh gradients only with CSS code.
Gradihunt
Millions of auto-generated gradients.
More.graphics
Unique and Free Generator Tools in One Place.
Real-time Colors
A tool to visualize color choices and color palettes on a real website.
ColorContrast.App
Check and suggests colors to meet the required WCAG or APCA contrast ratio.
The Contrast Triangle
A tool for checking text, link and background contrast at the same time.
CSS HD Gradients
CSS gradient builder.
Vivid Gradient Generator Tool
Create gorgeous, buttery-smooth color gradients for UI design or backgrounds.
Fffuel
A collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds.
Web Gradients
A free collection of 180 linear gradients in CSS3, Photoshop and Sketch.
Picular
The color of anything.
Super Color Palette
Generate color palettes from a hex with up to 24 colors. Shift hue, saturation, lightness, and more.
Mesh Gradient Generator
Create and export mesh gradients as SVG or to Figma.
Hue.tools
A free color mixer, blender, info and modifier tool.
UI Colors
Tailwind CSS color generator.
Shader Gradient
A tool to create beautiful, moving gradients.
OKLCH Color Picker & Converter
OKLCH is a new way to encode colors.
Tint & Shade Generator
Generate tints and shades from any color.
ColorFlownew
Mesh gradient editor.
Animation
AOS – Animate On Scroll Library
Animate elements on scroll.
CSS Text Animations
Collection of hand-picked free HTML and CSS text animation code examples.
Cubic-bezier
Create CSS animation using cubic-bezier.
Easing Functions Cheat Sheet
Helps you to choose the right easing function.
Ceaser
CSS Easing Animation Tool.
Hover.css
A collection of CSS3 powered hover effects.
Animated Backgrounds
A collection of free looping 4K video backgrounds.
Animista
On-Demand CSS Animations Library.
Stroke
Hand-drawn SVG animations for logos, signatures, and illustrations.
Visuals (images, illustrations, videos)
Pixabay
Free stock photos and videos.
Unsplash
Free stock photos.
Cleanup.pictures
Remove any unwanted objects from your pictures in seconds.
CropScore
An image cropper for content creators.
Acme Logos
Professional placeholder logos.
Cool Backgrounds
A collection of tools to create compelling, colorful images for blogs, social media, and websites.
Lukaszadam
Free illustrations.
Storyset
Free customizable illustrations for your next project.
Bigheads
Randomly Generated Characters for Your Apps & Games.
Blush Design
Easily create and customize stunning illustrations with collections made by artists across the globe.
Sublus
Mix & Match your Illustration needs for free.
IRA Design
Build your own illustrations.
Open Doodles
A Free set of sketchy Illustrations.
Shape.so
Icons and illustrations fully customizable.
Iconsout
Indian doodle illustration pack.
Techsini
Multi-Device Website Mockup Generator.
Dimmy.club
Device mockup generator.
Pika.style
Create screenshots and browser mockups quickly.
Generated Humans
100,000 humans that don’t exist. Super realistic whole-body images.
Ssemble
An online video editor that helps in creating professional marketing videos.
Wepik
Free online AI image generator (text to image).
Doodle Ipsum
The lorem ipsum of illustrations.
Transhumans
Open source illustrations of character transcending their biological barriers.
Pixels Market
Customize and download thousands of illustrations available in a dozen styles.
Open Peeps
A hand-drawn illustration library to create scenes of people.
PostSpark
Screenshot editor tool.
Doodle Ipsumnew
The lorem ipsum of illustrations.
ISO Republicnew
High-resolution stock images & videos.
UI Facesnew
Free AI-generated avatars.
Icons
Material Icons
Google Fonts Material Icons.
Ionicons
Open source icons.
Linea Icons
List of free icons.
Iconshop
Free vector icons for commercial use.
Fontastic
Add vector Icons to your website.
Font Awesome
The web’s most popular icon set and toolkit.
Feather Icons
Simply beautiful open source icons.
Health Icons
Free, open source health icons.
Loaf
A free animated icon editor.
Shape.so
Icons and illustrations fully customizable.
Vertex.im
Free customizable 3D icons.
BlobsIcons
+328 Free colorful icons.
Futicons
Icons for the future.
Iconoir
A high-quality selection of free icons.
Flowbite Icons
Free and open-source SVG icons.
Iconbuddy
Over 180k+ open source icons.
Iconic.app
Free pixel-perfect icons.
Its Hover
A collection of smooth, high-quality animated icons.
Streamline
Your ultimate icon library.
Lucide Icons
Beautiful and consistent icons.
Remix Icon
Open source icon library.
3D Iconsnew
Beautifully crafted free and premium 3D Icons.
All SVG Iconsnew
Browse and download 250000+ free SVG icons for your projects that are free to use and customizable.
Phosphor Iconsnew
A flexible icon family for interfaces, diagrams, presentations.
Typography
Google Fonts
A library of more than a thousand free and open source font families.
Font Pairing
Find fonts that go together.
Type Scale
Preview and choose the right type scale for your project.
The Type System
The Material Design type scale.
Wordmark
Helps you choose fonts for your crafting projects.
Web font Preview
Preview google fonts on a real website.
Beautiful Web Type
Guide to only the best
open-source typefaces.
Fontpair
Free Google font pairs for your next project.
Fontjoy
Google font generator showcases three fonts in use.
Typespiration
Inspirational font combinations and color palettes free to use in your own designs.
TypeTrials
A free platform to test and experiment with fonts.
Free Fonts For Interface Designers
Free beautiful, well-crafted fonts for personal and commercial projects.
Google Font Pairings
Ready-made Google Font type pairing palettes available to use instantly, for free, in Figma.
The good line-height
Calculates the exact number so it always fits the baseline grid.
Proportio
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
Pimp My Type
Learn how to use the power of typography.
Fontshare
Free quality fonts.
Font.fish
A browser tool for spatially exploring thousands of fonts.
Find Font
Preview and compare fonts side by side with your own text.
Sweetfont
The sweetest way to find Google Fonts.
Typescale AInew
Typography scale and design tokens generator.
Developer Tools
Wireframe.cc
A design tool for wireframing.
Tiny Helpers
A collection of free single-purpose online tools for web developers.
CSS Tips
CSS tips and tricks you won’t see in most of the tutorials.
Can I use
Browser support tables for modern web technologies.
Emmet Cheat Sheet
Toolkit that can greatly improve your HTML and CSS workflow.
MDN Web Docs
Documentation repository and learning resource for web developers.
Public APIs
A collective list of free APIs for use in software and web development.
Material Design
A system of guidelines, components, and tools that support the best practices of user interface design.
Cdnjs
A free and open-source CDN service.
Random User Generator
A free, open-source API for generating random user data.
BEM Cheat Sheet
This tool helps you to find the right class name.
CSS Generators by Smashing Magazine
Useful generators for everything CSS.
Hero Generator
It Generates the code for the hero.
Neumophism.io
Generate Soft-UI CSS code.
SVG Generators by Smashing Magazine
SVG generators for everything.
CSS Grid Generator
This tool will generate CSS grid for you.
Slick
The last carousel you’ll ever need.
Web.dev’s Guidance
See how well your website performs.
CSS3 Generator
A handy tool that will create the code you need for your CSS.
CSS3 Maker
A code generator that will smoothly create CSS3 code for amazing backgrounds and patterns.
Favicon Generator
Convert image to a Windows favicon and App icons.
Favicon Generator
Create a favicon for your website.
WAVE
Web accessibility evaluation tool.
Codepen
Open-source learning environment, where developers can create code snippets, called “pens,” and test them.
Sharing Debugger
Preview how your content will look when it’s shared to Facebook.
Checklist Design
A collection of the best design practices.
Complete guide to accessible front-end components
A list of all accessible components.
Website Planet
Effective free tools to help you manage and improve your website.
Theme toggles
A collection of awesome, easy to use, animated toggles.
Shadow Palette Generator
Create a set of lush, realistic CSS shadows.
Speak Human
Generate human centric microcopy for all purposes.
MDN Playground
Bring your code to life.
Buttons.cool
A collection of free buttons to copy & paste in your project.
UI Ball
Useful things for devs.
OverAPI
A site collecting all the cheatsheets.
Responsively App
An open source browser which helps you test your sites for multiple devices.
SVG Loading Icons
100+ open source SVG spinners.
404s
A gallery of error 404 page designs.
Yellow Lab Tools
Online test to help speeding up heavy web pages.
Logoipsum
181 free placeholder logos.
Web Code Tools
The best code generators for developers.
EaseMaster
The ultimate easing visualization and generation tool for modern frontend development.
CSS Generators
A collection of CSS generators.
WCAG for designers
WCAG design checklist.
Helpful Tools
Diagrams.net
Security-first diagramming for teams.
Zen Flowchart
The simplest online software to create flowcharts.
Ray.co
Create beautiful images of your code.
Omatsuni
Open source browser tools for everyday use.
29 Design Tools & Websites You’ve Never Heard of
A list of resources by Danny Sapio.
Text Cleaner
A text cleaning and text formatting online tool.
Witeboard
Shareable online whiteboard.
Excalidraw
Virtual whiteboard for sketching hand-drawn like diagrams.
Design System Checklist
An open-source checklist to help you plan, build and grow your design system.
Talk Time Calculator
Convert words to time.
Visual Vocabulary
A useful starting point for making informative and meaningful data visualisations.
Rehumanize
Transform AI text
into human writing.
How to Professionally Saynew
A guide for your daily “professional” interactions.
Delphitoolsnew
A collection of small, low stakes and low effort tools.
WordPress Plugins
Contact form 7
This plugin can manage multiple contact forms.
Classic Editor
Restores the previous (“classic”) WordPress editor and the “Edit Post” screen.
WPForms
WordPress Contact Form Builder Plugin.
Yoast SEO
Search engine optimization plug-in for WordPress.
Elementor
Page builder plugin for WordPress.
Robo Gallery
Photo and image gallery plugin.
Practice (games & challenges)
Kerntype
A letter spacing game.
FrontEnd Mentor
Improve front-end coding skills by building real projects.
Frontend Practice
Accelerate your skills by recreating real websites from real companies.
Sharpen Design
A free design challenge generator to practice and teach graphic design, UX, branding, and more.
Method of Action
Tools, toys and games to help you learn design, for free.
Flexbox Froggy
A game to learn flexbox.
Griddy
Learn CSS grid.
Codepip
Learn to code by playing games.
Advent of CSS
24 CSS Challenges for the season.
#JavaScript 30
30 Day Vanilla JS Coding Challenge.
Codepen
Open-source learning environment, where developers can create code snippets, called “pens,” and test them.
CSS Speedrun
A small fun app to test your CSS skills.
Can’t Unsee
A game for UX designers.
Kolor
Free color guessing browser game.
It’s Centred That
Test your designer eye.
Color Game
A color matching game.
Pixactly
An online tool that tests how well you know your pixels.
Shape Type
A letter shaping game.
Daily UI
A series of design challenges and surprise rewards sent out every day.
Fake Clients
Generate client briefs to practice logo design, web design, illustration, UX & UI.
Chromatic
A casual relaxing puzzle game where you sort color and create gradients.
Reading (articles, books & ideas)
Better Web Type
Free web typography course for web designers and developers.
Sidebar
The best design links of the day.
Smashing Magazine
Delivers reliable, useful and practical articles to web designers and developers.
CSS Tricks
Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
UnRead.Design
Collects links around the web that aims to help you learn something new.
Web Accessibility by Google
In this course you’ll get hands-on experience making web applications accessible.
100 Days Of More Or Less Modern CSS
A blog post about modern CSS every day for 100 days.
Clients From Hell
A collection of anonymously contributed client horror stories from designers.
Deceptive Patterns
Website about deceptive patterns (also known as “dark patterns”).
16 Little UI Design Rules that Make a Big Impact
A UI design case study to redesign an example user interface using logical rules or guidelines.
Design Hacks
The Design Hacks newsletter features original design articles on color, typography, layout, UX, design process, and more.
Start Here, designer!
A credible resource collection for designers curated by Krisztina Szerovay.
Free Books For Interface & UX Designers
Useful free eBooks for UX designers, interface designers and product designers.
The UX Research and Design Blog
Curated content (resources, tools, etc.) on UX research, inclusive design, enterprise UX, accessibility, and more.
Digital Accessibility Blogs and Newsletters
A list of blogs and newsletters focused on digital accessibility.
Coding Websites and Apps
A list of helpful coding websites and apps for students.
Landing Page FYI
Landing page builders – examples, tools, and components.
BrandGuidelines
Handpicked curated brand guidelines from around the world.
AI Coding Tools and Resources
A guide covering AI concepts, coding tools, and additional learning resources.
Legibility
A free book on legibility by Mary C. Dyson.
Refactoring UI
Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer’s point-of-view.
Cognitive Bias Cheat Sheet
An organized list of cognitive biases.
Abtest.design
Curated collection of A/B test results from best-in-class apps.
Optimal’s Learn Hub
Get expert-level resources on running research, discovery, and building an insights-driven culture.
Navigating the Web Platform
Keep track of what you can use, of what’s new in web browsers, and ways you can influence the development of the platform by making your voice heard.
The Fundamentals of Understanding Color Theory
The 7-step guide to understanding color theory.
RageCheck
A tool for understanding manipulative framing in media.
20 Ideas for Better Data Visualization
Practical tips and ideas for making data visualizations more effective.
Gestalt Principles in UI Design
How to become a master manipulator of Visual Communication.
191 Social Proof Examples
Discover strategies to build trust, drive conversions, and grow your brand.
Accessible Design Checklist
Improve your design’s accessibility with this quick reference checklist.
People Nerds
UX research blog.
Picalli
Front-end education for the real world.
Optical effects in user interfaces
How to make optically balanced icons, correct shape alignment, and perfect corner rounding.
Detail.design
A collection of small details that make big difference.
Accessibility for Everyone
A foundational book on web accessibility by Laura Kalbag.
Cheatsheet librarynew
A high res files of cheatsheets and quick guides.
Designing for people with anxietynew
Design principles for reducing anxiety by creating calmer, clearer, and more predictable user experiences.
21 Lessons from 14 Years at Googlenew
On code, careers, and the human side of engineering.
Learning (courses, guides & principles)
Laws of UX
A collection of best practices that designers can consider when building user interfaces.
Design Principles
An open source collection of Design Principles and methods.
Uxtoast
Learn the fundamentals of UX & UI Design.
Growth.Design
The psychology of design: 106 cognitive biases and principles that affect your UX.
Roadmap SH
Step by step guides and paths to learn different tools or technologies.
Scrimba
Interactive learning platform for frontend developers.
LearnLayout
This site teaches the CSS fundamentals that are used in any website’s layout.
Beginner JavaScript
JavaScript Notes and Reference.
Introduction to JavaScript
Learn JavaScript with CodeAcademy.
JavaScript for Beginners Specialization
Build Your Skills in JavaScript and jQuery.
Learn JavaScript – Full Course for Beginners
A complete 134-part JavaScript tutorial for beginners.
Build 15 JavaScript Projects – Vanilla JavaScript Course
Sharpen your JavaScript skills by building 15 projects using vanilla JavaScript.
The Complete JavaScript Course 2021: From Zero to Expert
Master JavaScript with projects, challenges and theory.
FreeCodeCamp
Learn to code for free.
Udemy
An online learning and teaching marketplace.
Skillshare
An online learning platform with thousands of creative courses and classes.
JavaScript.info
The modern JavaScript tutorial.
Learn CSS
An evergreen CSS course and reference to level up your web styling expertise.
DOM Events
Learn how the DOM Event system works through exploration.
CSS Hell
Collection of common CSS mistakes, and how to fix them.
HTMHell
A collection of bad practices in HTML, copied from real websites.
860+ Free Online Courses
Free online programming and computer science courses.
Built for Mars
More than 10,000 hours of UX research and analysis, compiled into 59 case studies.
Hack Design
Design lessons for everyone, curated by top designers.
12 Days of Web
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.
Modern CSS
Modern CSS Solutions for Old CSS Problems.
SmolCSS
Minimal snippets for modern CSS layouts and components.
Kids’ Computer Essentials: Graphic Design
A great breakdown on the principles of graphic design, typography, learning resources and projects to try.
Learn Accessibility
An evergreen accessibility course and reference to level up your web development.
The Guide to UX Design
A free, self-guided class to help you take your first steps into digital product design.
Free Coursera Courses
1700 Coursera courses that are still completely free.
Defensive CSS
Practical CSS and design tips that helps in building future-proof user interfaces.
UI & UX Micro-Tips
A collection of 64 powerful tips to help improve your designs instantly.
Learn to Code From Home
Helpful resources and tools to learn to code from home.
The Odin Project
Provides a free open source coding curriculum that can be taken entirely online.
Tell Better Stories
Nine principles of better stories.
UX Design Glossary
Explore UX design glossary to improve your customer experience with a good UX.
Learn HTML Free
Basic HTML codes for beginners.
Design System Knowledge Base
A resource for design system questions.
Design Good Practices
Learn everything you need to become a better designer.
UX Survival Guidenew
Empowering experienced designers to level up in their career by demonstrating their value beyond visuals.
Design Systems Checklistnew
Build better design systems with this list.
Open Visualization Academynew
Free repository of knowledge about information design, data visualization, and data literacy.
Elizabeth’s Declassified Guide to Product Designnew
A guide to be your companion throughout your product design journey.
Inspiration
Web Design Museum
Exhibits over 2,000 carefully selected and sorted web sites that show web design trends between the years 1991 and 2006.
Illustrations Universe
Get inspiration from world’s best product illustrations.
Cosmos
Your space for inspiration.
Framer Awards
Explore the best websites built with Framer.
Website Headlines
A curated library of the best website headline examples.
National Design Awards
The National Design Awards honor innovation and impact and recognize the power of design to change the world.
GoodCart
Explore the best-designed ecommerce websites in one place.
Artvee
Discover the best in Classical and Modern Art.
App Stacks
Discover stories and stacks behind your favorite apps.
Letters to a Young Creator
A collection of honest perspectives on what it takes to make something great, written by people who have done it before.
SaaS Landing Page Examples
Discover the best 900 landing page examples created by top-class SaaS companies.
One Million Screenshots
A collection of the web’s top homepages.
Dead Simple Sites
The most minimal sites on the web, curated in one place.
Archives.design
A digital archive of graphic design related items that are available on the Internet Archives.
Landbooknew
Website design inspiration gallery.