Master List of Web Design Resources

Color Palettes

Make Tints and Shades: Enter a hex code and get a list of tints and shades that match.
Color Hunt: Generate harmonious color combinations.
Colormind: Website specific color palettes with suggestions for font colors to make sure your text is readable.
ColorSpace: Generate several color palettes from one color.

Photos/Videos

FilmSupply: Cinematic footage licensing.
Coverr: Free stock video.
Freepick: Free photos, vectors, and mockups.
Pexels: Free stock photos and videos.
Picjumbo: Get full images collections for more consistency in your stock images.
Pixabay: Free images, videos, and sound.
Shotstash: Free HD stock pictures.
StockSnap.io: Free stock photos. New images added daily.
Stockvault: Free images, textures & illustrations.
Unsplash: Free stock photos.

Icons/Background Patterns

Flaticon: Free vector icons. Animated icons as well.
GetWaves: Create your own fun shape dividers instead of just using Salient’s shape dividers.
Haikei: Create background visuals. You can customize them pretty well.
Lordicon: Library of animated icons.
PatternPad: Get patterns in PNG, SVG, or JPEG.
PhosphorIcons: Flexible Icon Family. SVG’s Available.
Flaticon: Free vector icons. Animated icons as well.
Shape Dividers: Even more fun shape dividers to add to any website.
Super Designer: Create patterned backgrounds. Both png’s and custom CSS available.
Tranglify.io: Let’s you create a background, customized to the colors you want, that are a bunch shapes. Good for adding background textures.
useAnimations: Animated icons in lottie framework.

3D

Shapefest: Free library of 3D objects.
Spline: Design your own 3D objects.

Illustrations

Blush: Customizable Illustrations.
DesignStripe: Illustration library, you can customize the illustrations to make them more or less complex and then adjust the colors.
Humaaans: Illustrations of people you can customize.
Scale by Flexple: Royalty free vector illustrations for commercial use.
Skribbl: Hand-drawn illustrations.
Story Set: Fun illustrations of people, like the ones you see on tech sites.
theseisle.com: Free illustrations to use in your next project. Available in PNG and SVG.
unDraw: Open-source Illustrations.

CSS/JavaScript

Glassmorphism CSS Generator: Just copy/paste the code to get a glassmorphism look on your elements.
Fancy Border Radius: Lets you make your borders into funny shapes instead of just squares.
Magic Pattern: CSS Background patterns.
Neumorphism: Generate CSS for a neumorphic shape.
Animated CSS Backgrounds: This is what I used as a reference for the floating circles on my homepage background.
Transition CSS: Create CSS transitions.
Fun Button: Get the CSS for a cool, custom button.
SVG Background: Get CSS for backgrounds, you can also download the backgrounds as SVG or PNG.
CSS Box-shadows: A wide variety of shadows you can copy for your elements.
UIverse.io: Opensource CSS to style buttons, checkboxes, toggle switches, cards, loaders, and inputs.
Shapefest: Over 100 buttons styles. Just copy the CSS.

Text/Fonts

Type Scale: Find a good way to scale up the size of your font.
Good Line-Height: Find the right line height for your typescale.
Microcopy: Search for great slogans, headlines, notifications, CTA, error messages. Any short copy you need.
Fontsquirrel: Tons of fonts for you to use. Some free, some paid.

ADA Compliance

Color Contrast Checker: Check if your font color and background have enough contrast to be ADA compliant.
Material Design – Color Tool: Make sure your color palettes and UI are accessible. Gives recommendations for font color on your background colors.

Site Speed

TinyPNG: Compress images in PNG, JPG, or WebP format to reduce their file size.
Shrink.Media: Smartly compresses and reduces image dimentions.

Mockups

Angle.sh: Vector device mockups for Sketch, Figma, and XD. You can only get 50 downloads for free.
Devices by Meta: Free images of devices to use for your mockups.
Is.graphics: Free mockups.
Justinmind: Alternative to Figma. Free prototyping tool for UI and UX design.
Screely: Turn screenshots into browser mockups.
Userflows: Create user journeys for your mockups.

Misc.

Befront: Learn design skills through practice. From beginner to advanced.
Calculate Stuff: Find any type of calculator for any need. Health, financial, etc.
SEOptimizer: Get a detailed SEO report.
Shapefest: UI components handbook. Guide to the standardized design of certain design components, like contact forms.
Shapefest: Create flowcharts. Great for plotting user flows.