Sign up to our monthly newsletter

Get the latest free design tools and resources in your inbox.
Once a month. No spam.

Design Gems - A collection of free tools and resources for designers | Product Hunt Embed

Made with ❤️ by Fawzi // fawzi@designgems.co

Design Gems logo

A hand-selected collection of 170+ free tools and resources for designers

👉 Submit a tool or resource 📩 Sign up to our newsletter

All

1loc logo

1loc

The most useful JavaScript one-liners

404 Illustrations logo

404 Illustrations

Royalty free illustrations for 404 error pages

98.css logo

98.css

A design system for building faithful recreations of old UIs

A11y Text on Background Image logo

A11y Text on Background Image

Foreground color accessibility on a background image.

A11ygator logo

A11ygator

Check if your website is WCAG compliant

Absurd Design logo

Absurd Design

Free surrealist illustrations

Adobe Color Palette Generator logo

Adobe Color Palette Generator

Create color palettes with the color wheel or image, browse thousands of color combinations

Alt Text Tester logo

Alt Text Tester

Ensure all your images have alt text for better accessibility

ANDI logo

ANDI

Test your web content for accessibility

Animate.css logo

Animate.css

Just-add-water CSS animations

anime.js logo

anime.js

Easy JavaScript animations

Animockup logo

Animockup

Free animated mockup maker

Archetype logo

Archetype

Create beautiful web typography designs

Artboard Manager logo

Artboard Manager

Automatically arrange your Sketch Artboards into rows & columns

Avataaars logo

Avataaars

Create avatar illustrations in Sketch. Combine clothes, hair, emotions, accesories, and colors.

axe-coconut logo

axe-coconut

Chrome extension to check web accessibility

BehaviourKit logo

BehaviourKit

Behavioural science content, insights and tools for creative professionals

Better Google Fonts Finder logo

Better Google Fonts Finder

Find great Google Fonts based on visual characteristics

Bézier Game logo

Bézier Game

A game to help you master Beziér curves

Black Illustrations logo

Black Illustrations

Beautiful and free illustrations of black people for your next digital project

Blobs logo

Blobs

Generate beautiful blob shapes for web and flutter apps

Blush logo

Blush

Create, mix, and customize illustrations made by artists around the world

Booklets.io logo

Booklets.io

Browse hundreds of booklets on design, business, freelancing & more. Learn new skills & insights, fast.

BrandColors logo

BrandColors

The biggest collection of official brand color codes around

Brandfetch logo

Brandfetch

The brand search engine. Easily search brand assets from across the internet.

Bulbman.art logo

Bulbman.art

Free illustrations for designers by a father and son artistic team

Bulma logo

Bulma

Free, open source CSS framework based on Flexbox

Can’t Unsee logo

Can’t Unsee

A simple game to test your Design skills

Case Study Club logo

Case Study Club

Curated UX case study gallery

Charco Illustrations logo

Charco Illustrations

A set of 16 handcrafted illustrations for your web & app projects

Charts logo

Charts

Figma plugin to generate charts that can be added and edited within your document

Cleanmock logo

Cleanmock

Mockup your designs simply and beautifully

Color Blind logo

Color Blind

Figma plugin to view your designs in the 8 different types of color vision deficiencies

Color by Cloudflare logo

Color by Cloudflare

Create color palettes and apply color blindness filters

Color Copy Paste logo

Color Copy Paste

Copy & paste colour directly from your camera to Figma, Sketch, or your browser

Color Hunt logo

Color Hunt

Free and open platform for color inspiration with thousands of trendy hand-picked color palettes

Color Oracle logo

Color Oracle

Color blindness simulator for Windows, Mac and Linux

color x color logo

color x color

A tool to generate color shades using the HSLuv color space

Colorable logo

Colorable

Find safe color combinations with predefined colors and check pass/fail scores for the WCAG accessibility guidelines.

Colorblind Webpage Filter logo

Colorblind Webpage Filter

Apply color blindness filters to any URL

ColorKit logo

ColorKit

Generate color scales by mixing the shades between two colors. Enter a start and end color, and choose the number of blend steps, to reveal the stepped gradient.

Colors & Fonts logo

Colors & Fonts

Find colors and typography combinations ready to copy paste in one click,

colors.lol logo

colors.lol

Overly descriptive color palettes

ColorShark logo

ColorShark

Test color contrast compliance with the WCAG as set forth by the W3C.

ColorSlurp logo

ColorSlurp

Mac app that lets you pick colors from anywhere on your screen with the magnifier

Contra Wireframe Kit logo

Contra Wireframe Kit

A starter wireframe kit for quick design and prototyping your idea. Works with Figma, Sketch, XD, and Invision Studio.

Contraste logo

Contraste

Mac app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG)

Coolors.co logo

Coolors.co

Create the perfect palette or get inspired by thousands of beautiful color schemes.

CSS-Tricks logo

CSS-Tricks

Tutorials and articles to help you become a master of HTML, CSS, and JavaScript

CSS.gg logo

CSS.gg

Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API.

CSSBattle logo

CSSBattle

Use your CSS skills to replicate targets with smallest possible code.

cssgradient.io logo

cssgradient.io

Create CSS gradient backgrounds and learn about gradients through technical articles and real-life examples

Culrs logo

Culrs

A simple and smart approach to create your color palette

Dark CSS Generator logo

Dark CSS Generator

Generate dark mode CSS for your site in one click

Dash Illustrations logo

Dash Illustrations

A set of well-crafted illustrations which includes categories like AI, Blockchain, Analytics, E-commerce, Security, and more.

Delesign logo

Delesign

Royalty-free illustrations for your projects

Design and Code in Framer X logo

Design and Code in Framer X

Create powerful design and code components for your app and design system in Framer X. By Design+Code.

Design Better by Invision logo

Design Better by Invision

Essential reading on the practices that propel the best design teams forward.

Design Kit logo

Design Kit

IDEO.org's platform to learn human-centered design, a creative approach to solving the world's most difficult problems

Design Principles logo

Design Principles

An open source collection of Design Principles and methods.

Design Systems in Figma logo

Design Systems in Figma

Complete guide to designing a site using a collaborative and powerful design system in Figma. By Design+Code.

Dimensions.guide logo

Dimensions.guide

Reference database of the standard measurements and sizes of the everyday objects and spaces that make up our world.

dpi.lv logo

dpi.lv

DPI values for every smartphone, tablet, and laptop

Drawing Humans logo

Drawing Humans

Learn how to draw the human body and all it's variations in this series aimed at beginners

DrawKit logo

DrawKit

Beautiful free vector illustrations

Eagle logo

Eagle

A new way to collect, search and organize your image files in a logical way and all in one place

Empathy Prompts logo

Empathy Prompts

Prompts to consider when making things for others to use

Eva Icons logo

Eva Icons

480 beautifully crafted Open Source icons for common actions and items

Evericons logo

Evericons

460+ well-crafted icons for your next project. Free for personal and commercial usage.

Facebook Design logo

Facebook Design

Mockups and other resources from Facebook Design

Favicon.io logo

Favicon.io

Quickly generate your favicon from text, image, or choose from hundreds of emojis

Feather logo

Feather

280+ icons with customizable size, stroke width, and color

Font Awesome logo

Font Awesome

Get vector icons and social logos on your website with the web's most popular icon set and toolkit.

Font Combinations logo

Font Combinations

Find the perfect font combination for your design project

Font Generator logo

Font Generator

Generate unique font pairings from Google Fonts

FontPair logo

FontPair

An extensive library of font pairings using Google Fonts

Fonts In Use logo

Fonts In Use

An independent archive of typography

FontSpark logo

FontSpark

Discover better fonts

Ghost Illustrations logo

Ghost Illustrations

Uncomplicated and smooth illustrations

Gifski logo

Gifski

Convert videos to high-quality GIFs

Glaze logo

Glaze

Free illustrations, for everything

Grabient logo

Grabient

Beautiful and simple UI for generating web gradients

Gradienta logo

Gradienta

Multicolor gradients that can be downloaded in pure CSS or in JPG

Gramara logo

Gramara

The AI-powered Grammar Checker

Graphic Design Basics by Canva logo

Graphic Design Basics by Canva

Learn Graphic Design basics with this introductory course by Canva

Graphic Design Basics: Visual Design logo

Graphic Design Basics: Visual Design

Learn the core principles of visual design

Growth Design logo

Growth Design

Growth & UX case studies in a comic book format.

Hack Design logo

Hack Design

Weekly design lessons in your inbox

Happy Hues logo

Happy Hues

A color palette inspiration site

Hatchful by Shopify logo

Hatchful by Shopify

Create stunning logos in seconds

Hex Naw logo

Hex Naw

Test entire palettes or color systems for contrast and accessibility

High Resolution logo

High Resolution

25 interviews with 25 designers working at companies like Google, Facebook, Microsoft, Airbnb, and more.

How to Center in CSS logo

How to Center in CSS

An easy-to-use code generator for centering in CSS

htmldom.dev logo

htmldom.dev

Common HTML DOM with vanilla JavaScript

HueSnap logo

HueSnap

Create beautiful color palettes to share and inspire others

Humaaans logo

Humaaans

Mix-&-match illustrations of people with a design library

IconBros logo

IconBros

9000+ free icons grouped in 200+ collections

iconmonstr logo

iconmonstr

4400+ free icons in 300+ collections

Icons8 logo

Icons8

Free icons, photos, vectors, and music

Illlustrations.co logo

Illlustrations.co

Open source illustrations kit

illustrio logo

illustrio

Free icons available in 16 different styles

Inclusive Design by Microsoft logo

Inclusive Design by Microsoft

Inclusive Design resources, toolkits, and booklets from Microsoft Design

Indian Doodle Illustration Pack logo

Indian Doodle Illustration Pack

Beautiful and free doodles of characters in Indian clothing

Interfacer logo

Interfacer

High quality mockups and other design resources

Intro to the Design of Everyday Things logo

Intro to the Design of Everyday Things

This course provides a summary of key concepts from the first two chapters of The Design of Everyday Things by Don Norman.

Ionicons logo

Ionicons

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font.

IRA Design logo

IRA Design

Build your own amazing illustrations

Isometric Love logo

Isometric Love

Isometric objects for your design projects. Free for non-commercial use.

Keyframes logo

Keyframes

Write better CSS with a suite of tools to create CSS Keyframes animations, shadows, colors, and more

Laws of UX logo

Laws of UX

aws of UX is a collection of the maxims and principles that designers can consider when building user interfaces.

ls.graphics logo

ls.graphics

Free library of mockups for digital devices and physical products

Lukasz Adam Illustrations logo

Lukasz Adam Illustrations

Free illustrations, created every week

ManyPixels logo

ManyPixels

Free monochromatic, isometric, two-color, and flatline illustrations

Materialize.css logo

Materialize.css

A modern responsive front-end framework based on Material Design

Meta Tags logo

Meta Tags

Generate meta tags and preview how your webpage will look on Google, Facebook, Twitter and more!

Milanote logo

Milanote

Flexible visual workspace for creating moodboards, storing project information and getting feedback on design concepts

Mixfont logo

Mixfont

A modern font generator with exportable CSS

Mockup World logo

Mockup World

The original biggest source of free photo-realistic Mockups online

MVP.css logo

MVP.css

A minimalist stylesheet for HTML elements. No class names, no frameworks.

Name logo

Name

Description

Noun Project for Mac logo

Noun Project for Mac

Easily drag and drop icons into your favorite apps

Nucleo App logo

Nucleo App

Desktop app that can be used as an icon library and organizer. Over 29,000 icons available.

Octopus.do logo

Octopus.do

Super fast visual sitemap creator

One Click Theme logo

One Click Theme

Free, handpicked freebies and UI Kits for Sketch, Figma, Adobe XD, InVision, Webflow, and Photoshop

Open Peeps logo

Open Peeps

Hand-drawn illustrations of people

paaatterns logo

paaatterns

Free collection of beautiful patterns for all vector formats

Palettable logo

Palettable

Generate beautiful color palettes using the knowledge of millions of designers.

Paper Illustrations logo

Paper Illustrations

Incredible set of paper illustrations absolutely free for both personal and commercial use

PaperSizes logo

PaperSizes

The best resource for International Paper Sizes, Dimensions & Formats

pattern.css logo

pattern.css

CSS only library to fill your empty background with beautiful patterns.

Picular logo

Picular

Google, but for colors.

pixeltrue logo

pixeltrue

Free SVG Illustrations and Lottie Animations are available for free for personal and commercial use

Poke Illustrations logo

Poke Illustrations

A hand-crafted set of empty, error & success illustrations for your web, app & any print projects. Comes in light and dark mode.

POP - Prototyping on Paper logo

POP - Prototyping on Paper

Create interactive low-fidelity prototypes on your iPhone or iPad

Principles of UX Design logo

Principles of UX Design

Free e-book about the Principles of UX from InVision

PXtoEM logo

PXtoEM

PX to EM conversion made simple.

Random Microcopy Prompts logo

Random Microcopy Prompts

Get a random microcopy prompt and improve your UX Writing skills

Randoma11y logo

Randoma11y

A fun random accessible color scheme generator

Responsively logo

Responsively

Preview your code on all devices all at once

Retroooo Folks! logo

Retroooo Folks!

Vector-based library of hand-drawn sketches, created for Adobe Illustrator, Sketch and Adobe Draw.

Scrimba logo

Scrimba

Learn to code with interactive tutorials

Scripts for Adobe Illustrator logo

Scripts for Adobe Illustrator

Ready to add scripts written in JavaScript for Adobe Illustrator

ShapeFactory logo

ShapeFactory

Simple design tools for everyone: create logos, gradients, and duotone pictures

Sharpen logo

Sharpen

Design challenge generator

Shortcuts.design logo

Shortcuts.design

Every shortcut for designers in one place

Shorthand logo

Shorthand

Free and open source css framework, that allows you to make unique and modern design without writing any css

Show + Tell logo

Show + Tell

Create presentations in Figma with a single click

Sim Daltonism logo

Sim Daltonism

The color blindness simulator for iOS and Mac

Sketch Course logo

Sketch Course

Introduction to Sketch Basic Tools

sketchvalley logo

sketchvalley

Hand-drawn free vector illustration resources for your projects

Smash Illustrations logo

Smash Illustrations

Awesome illustration constructor with colorful and trendy characters

SmoothShadow logo

SmoothShadow

Create really smooth shadows by tweaking alpha, offset and blur with individual easing curves.

Snapfont logo

Snapfont

Live font previews on any webpage

Stark logo

Stark

The suite of integrated accessibility compliance tools for product development teams. Works with Sketch, Figma, and XD.

Stories by Freepik logo

Stories by Freepik

Free illustrations in 5 different styles

Streamline Icons logo

Streamline Icons

The largest icon pack with 30,000+ free icons

Streamline Lab logo

Streamline Lab

Over 80 free vector illustrations

Tachyons X-Ray logo

Tachyons X-Ray

Toggle a background grid on any webpage which can help you line elements up vertically and horizontally with each other.

Tailwind CSS logo

Tailwind CSS

Highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs

Texture.js logo

Texture.js

SVG patterns for Data Visualization

The A11Y Project logo

The A11Y Project

A community-driven effort to make web accessibility easier.

The Noun Project logo

The Noun Project

Free icons for everything

The User Testing Field Guide logo

The User Testing Field Guide

Free eBook by Marvel that gives you a step-by-step guide and template pack to help start your first usability test

Threed logo

Threed

Generate 3D Mockups right in your Browser

Type Anything logo

Type Anything

Simple tool to create great font combinations

UI Store logo

UI Store

Free UI resources for every design tool

UI8 logo

UI8

400+ design freebies including UI Kits, Icons, Wireframes, etc.

unDraw logo

unDraw

Free illustrations with customizable colors

unscreen logo

unscreen

Remove video backgrounds

urspace logo

urspace

Dynamic and robust portfolio builder

User Experience by accenture logo

User Experience by accenture

Learn about why user experience (UX) is important, the research and design basics, and the tools and testing techniques used in UX

Vector Creator logo

Vector Creator

Create engaging custom illustrations

Vector Mockups logo

Vector Mockups

Free collection of presentation mockups, compatible with Sketch, Figma, and Photoshop.

WAVE logo

WAVE

Web Accessibility Evaluation Tool

WCAG Quick Reference Guide logo

WCAG Quick Reference Guide

Quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements and techniques

Web Accessibility by Google logo

Web Accessibility by Google

Learn how to make accessible web applications

web.dev logo

web.dev

Run an audit on your website to evaluate your site's performance, accessibility, and SEO

Webflow Course logo

Webflow Course

Design and animate a high converting landing page with advanced interactions, payments and CMS

Webflow Ebooks logo

Webflow Ebooks

Free ebooks on responsive web design, freelancing, and more.

WebGradients logo

WebGradients

Free collection of 180 linear gradients, available in CSS, PNG, Sketch, and Figma formats

Who Can Use logo

Who Can Use

Check if your color combination is accessible

Whoosh Illustrations logo

Whoosh Illustrations

Free illustrations, compatible with Sketch, Figma, and XD.