Collection of curated

Web & Graphic Design Tools & Assets

(Mostly free)

Category

Subject

Google Fonts

Best free fonts foundry and more

By using our extensive catalog, you can share and integrate typography into any design project seamlessly—no matter where you are in the world.

Fontjoy

Font pairing made simple

Easy to use tool to sample different font pairings with customization and similar fonts showcase.

Mixfont

Mixfont is a fun and simple way to discover and visualize new fonts

Easy to use tool to sample different font pairings with customization.

Just My Type

A collection of font pairings from Typekit and H&FJ

A collection of fine font pairings.

My Fonts

A commercial font distributor

Simple and easy to navigate commercial font foundry.

Identifont

Identify your font

Provides a range of features to help you locate fonts or find information about fonts.

Burst

Free stock photos

Free stock photos catalogue.

Unsplash

Free stock photos

Free stock photos catalogue.

Pexels

Free stock photos

Free stock photos catalogue.

Freerange

Free stock photos

Free stock photos catalogue.

FreeDigitalPhotos

Free stock photos

Free stock photos catalogue.

Getty Images

Free non-commercial stock photos

For embedding.

StockLayouts

Free Graphic Design Templates

or for inspiration.

VectorPortal

Free vectors

and templates.

Better Font Finder

Find great Google Fonts

Sselect font families by visual similarity.

Google Font Combinations

The Best Google Font Combinations

Article about Google font combinations.

Font Pairing Guide

Canva’s Ultimate Guide to Font Pairing

Article about proper font combinations.

Font Pair

Font Pair helps designers pair Google Fonts together

Tool to create font combinations.

Responsive web typography

Rules

All the principles and systems you need to know to take the mystery out of responsive web typography.

F37 Foundry

Font foundry and more

Use their Type Tester.

Froala Design Blocks

Over 170 responsive design blocks

All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.

Interfaces.pro

Collection of UI design examples

Samples of various UI interfaces.

Best Website Gallery

Collection of website examples

Samples of various websites.

20 Split Screen Website Designs

Collection of website examples

Showcase of 20 split screen websites.

Free PSD Website Templates

50 Free PSD Website Templates

50+ Free PSD Website Templates For Corporate, Education, LMS, Blog Portfolio and Other Awesome Websites – 2017.

Dribble

Design showcase

Dribbble is a place to show and tell, promote, discover, and explore design.

Really Good Emails

Email design showcase

Really Good Emails aims to be the best showcase of email design and resources on the web.

nice portfolio

Portfolio design showcase

The nicest design portfolios on the web.

CallToIdea

Web design elements

Web design elements and solutions.

lapa

Landing page showcase

Web design elements and solutions.

JAM

Handcrafted & pixel perfect icons

Jam icons is a set of icons designed for web projects, illustrations, print projects, etc. Shipped in both font & svg versions.

Easy CSS3 Generator

Visual CSS3 generator

CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.

MediaQuery Generator

Visual MediaQuery generator

Easy to use and test MediaQuery generator.

.htaccess Generator

Easy to use .htaccess generator

Easy to use generator with many options.

Flexy Boxes

flexbox playground and code generator

Easy to use generator with many options.

CSS Grid Playground

CSS Grid playground and dev tools

CSS Grid Layout is completely changing the game for web design. Learn about CSS Grid Layout and the Firefox DevTools layout panel.

Now UI Kit

Free Bootstrap 4 UI kit

Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

archetype

Easy web typography code generator

Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser.

invoicetemplate

Create invoices fast and free

Easy invoicing on any platform.

Icons8

60k flat icons + 60 Free Animated Icons

Huge collections of flat and animated icons.

Free Frontend

CSS solutions, code & examples

Collection of CSS solutions and examples.

Shards UI Kit

Free Bootstrap 4 UI kit

Shards UI Kit is a wholesome responsive Bootstrap 4 kit provided for free.

Postleaf CMS

Free simple CMS based on Node.js

Create your next blog with a beautifully designed open source blogging platform built for the modern publisher.

Grav CMS

Free simple flat-file CMS

Very nice and simple flat-file CMS.

PageKit CMS

Free CMS based on Vue.js

Very small and fast CMS.

Pico CMS

Free simple, fast flat-file CMS

Pico makes creating and maintaining a website as simple as editing text files.

Super Tiny Social Icons

SVG and customizable social icons

Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 600 bytes!.

FullPage.js

Create Beautiful Fullscreen Scrolling Websites

Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.

AOS

Animate On Scroll Library

Variety of animate-on-scroll animations.

Ramjet

Element Morphing Library

Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.

CountUp.js

Create animations that display numerical data

CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.

15 Free Icon Sets

Article about free flat icons

When it comes to web design, and especially UI design, icons play a crucial role.

GearAward

Curated gallery of digital artworks

Talented web artists exhibit code-driven art.

Button hover

Button Hover Examples

Buttons are an essential element of interaction design. That’s why they’re so important and that’s why it’s good to get them right.

t-scroll

Animate On Scroll Library

Variety of animate-on-scroll animations.

CRELLO

Visual online design editor

Create designs and get inspired.

Canva

Visual online design editor

Create designs and get inspired.

Topol.io

Beautiful emails, easily

Our online e-mail editor will help you design beautiful and responsive messages.

Web Launch Checklist

Online Web Launch Checklist

Very useful web launch checklist.

Word Counter

Count characters, words, sentences, paragraphs and pages

Useful tool.

CSS Grid Generator

Simple CSS Grid generator

Simple CSS Grid generator.

The Ultimate CSS Generator

Visual CSS generator

It allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.

Sizzy

Online preview of a site on various devices

A tool for testing responsive websites crazy-fast.

BONSAI

Free Freelance proposals

Create, send, and track proposals online.

CSS Grid Cheat Sheet

Your ultimate CSS grid visual guide

Simple CSS Grid generator.

Compressor.io

Compress and optimize your images

Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.

Flipping content

Flipping a simple image to a div

Flipping a simple image to a div (transitions and 3d transforms).

CSS Icon Animate

Collection of Free Animated Icons

Flat and animated icons.

Bootstrap

CSS & JS Framework

For professional developers and designers alike.

Foundation

CSS & JS Framework

For professional developers and designers alike.

Kube

CSS & JS Framework

For professional developers and designers alike.

Quantity Query

A tool to help build Quantity Queries for your projects

A quantity query is a complex CSS selector that allows styles to be applied to elements based on the number of siblings.

Ratio Buddy

Tool to calculate aspect ratio

RatioBuddy is a happy little tool to help you calculate aspect ratios.

SVGOMG

Clean your SVG

Tool to minimize and clean SVG files.

CSS Filters

Demo and code of CSS Filters

See and understand the power of CSS Filters.

Ceaser

CSS Easing Animation Tool

Great tool to create code for your CSS animation easing.

Excel to HTML

No-Cruft Excel to HTML Table Converter

This simple utility allows you to paste data from an Excel spreadsheet (or an HTML table) and convert it to a new HTML table that is free of extraneous formatting.

Real Favicon Generator

Favicon Generator

Create your favicon.

favicon.io

Favicon Designer & Generator

Design and create your favicon.

Pantone to HEX

Pantone to HEX converter

Convert your favourite Pantone colour to HEX code.

Palleton

The colour scheme designer

Tool to design colour schemes.

CSS Gradient Text Effect

Tutorial

Here is a simple CSS trick to show you how to create gradient text effect with a PNG imag.

Adobe Color CC

Colour wheel

Colour generator.

CSS Gradient generator

Simple gradient generator

This generator will produce CSS Gradient code using a simple graphical user interface.

Material Design Palette

Material design palette generator

Pick two colours.

Material Design Colours

Material design palette generator

Pick your colours.

WebGradients

180 linear gradients

WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.

ColorMe

Visualize The CSS Color Function

Get your colour.

Colormind

Color scheme generator using AI

Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.

Learning CSS Grids

Great article on CSS Grid

A guide to CSS Grid.

Server Side Includes

Guide to Server Side includes

Make Easy site-wide changes with Server Side Includes.

Turn.js

Make a flip book with HTML5

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5.

Flexbox Grid

A grid system based on the flex display property

Grid framework based on Flexbox.

Solved by Flexbox

Cleaner, hack-free CSS

A guide to Flexbox.

Flexibility

Visual tool for Flexbox row

Simple visual to to set a row parameters.

FontAwesome

Most popular icons catalogue

Free icons.

Moving Letters

Directory of animated text effects

Choose your animation, get code.

iHover

CSS3 hover effects pack

iHover is an impressive hover effects collection, powered by pure CSS3.

Image Hover Effects

CSS image hover effects

Choose your animation, get code.

CSS Text Effects

From Codepen

Choose your effect, get code.

animista

CSS animations on demand

Choose your animation, get code.

Stack Motion Hover Effects

Decorative motion hover effects

Choose your animation, dig for code.

Animated Letters

Animated SVG lines

An artistically animated SVG font using the Segment library.

Text Hover Effects

Text Styles & Hover Effects

For inspiration.

Caption Hover Effects

7 Caption Hover Effects

Nice caption hover effects.

Google Web Designer

HTML5 Animation Tools

Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.

Animated SVG Icons

Using Snap.svg to animate SVG icons

Library of animated SVG icons.

Vivus Instant

SVG Stroke animation

Simply drag and drop your stroke based SVG and set your options.

CSS Shake

Some CSS classes to move your DOM!

Collection of shake animations.

Hover.css

Library of CSS Hover effects

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

TypeIt

jQuery typing plugin

The most versatile jQuery typing plugin on the planet.

Joomla

Award-winning content management system

Joomla! is an award-winning content management system (CMS), which enables you to build web sites and powerful online applications.

Responsive Screenshots

Take responsive screenshots

Get a pack of specific media sized screenshots.

Frappé Charts

Simple and modern charts for web

GitHub-inspired simple and modern charts for the web with zero dependencies.

Google Charts

Interactive charts for browsers and mobile devices

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.