Sammlungen von

Web & Graphic Design Tools & Assets

(Mostly free)

Category

Subject

JS Utilities

in single line of code

Favorite JavaScript utilities in single line of code! No more!

Text Fixer

collection of free online tools for web coding and text conversion

Free Online Tools for Generating Random Words, Converting Word to HTML, and more Web Goodness.

HTML Cleaner

HTML/CSS/JavaScrip Cleaner and much more

Amazing tool for any designer and developer.

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.

70+ Best Free Fonts

Free for Commercial Use in 2019

70+ fonts that offer free licenses for commercial (and personal) use.

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.

Jost

Variable Futura font

Jost aims to keep the attitude of Futura rather than the exact design.

Font Combinations

Font combinations for web designers.

A collection of 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.

Freepik

Graphic resources for everyone

Find Free Vectors, Stock Photos, PSD and Icons.

Nicepage

Website builder in your browser

Nicepage is the new powerful and easy-to-use builder for HTML5, Joomla, WordPress websites, blogs and themes.

Burst

Free stock photos

Free stock photos catalogue.

Unsplash

Free stock photos

Free stock photos catalogue.

Moose

Free stock photos

Stock Photos Designed to Work Together — For Free.

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.

Muz.li

Search engine for design inspiration

Search by color, keyword, or even just style.

siteInspire

showcase of the finest web and interactive design

Browse 7,234 sites by style, type, or subject, or just see the very best.

StockLayouts

Free Graphic Design Templates

or for inspiration.

Image Compare / Viewer

Compare images with a slider

A fully responsive slider to compare before and after images for grading, retouching and all else. Mobile and fluid container friendly!

SendX

The Biggest Collection of Free Responsive Email Templates

Search from over 1500+ responsive email templates or just click on the tags below to get the template you want.

VectorPortal

Free vectors

and templates.

Google HTML/CSS Style Guide

HTML and CSS style guide

This document defines formatting and style rules for HTML and CSS.

10 Best SEO Tools

10 Best SEO Tools to boost your organic traffic in 2019

Most of them are free ? so don’t worry about breaking your budget.

Course Duck

Collection of online programming courses

CourseDuck is your one-stop shop for researching and comparing online courses.

Form design

Best practices for the online form design

From zero to hero all in one blog post.

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.

CSSnectar

Inspirational websites

Triple vetted 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.

web.dev by Google

Test your site

web.dev helps developers like you learn and apply the web's modern capabilities to your own sites and apps.

.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.

Webwide

Community for web designers, developers and makers

The inclusive discussion community for web designers, developers and makers.

Ackee

Track without being tracked

Self-hosted, Node.js based analytics tool for those who care about privacy.

games for designers

Browser games for designers

A list of 8 ducational browser games from my bookmarks for the people who like structuring and accuracy.

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.

Motion Icons

Beautiful, animated SVG icons

Collection of flat and animated icons.

The Noun Project

Icons for everything

Over a million curated icons, created by a global community.

30 Seconds of CSS

A curated collection of useful CSS snippets.

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

CSS selectors cheatsheet

A quiz/list of CSS selectors.

Usefull tool to understand CSS selectors.

Use calc() to Change the Height

of a Hero Component

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!.

Free Illustrations

Free Vector Art Illustrations and Icons

All these Vector Art Illustrations and Icons are available for free, personal and commercial use

unDraw

MIT licensed illustrations for every project you can imagine and create

A constantly updated collection of beautiful svg images that you can use completely free and without attribution.

50 Free High Quality Silhouette Sets

Free high-quality silhouette sets

list of free high-quality silhouette sets of a wide range of subjects including animal and human figures

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.

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.

Rellax.js

Dynamic parallax scrolling effect, without dependencies

Free open source plugin built on vanilla JavaScript, so it doesn’t have any dependencies.

Rallax.js

Dynamic parallax scrolling effect, without dependencies

Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.

t-scroll

Animate On Scroll Library

Variety of animate-on-scroll animations.

Scroll Snap Type

Slideshow Both

Pure CSS Scroll Snap Type - Slideshow Both.

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.

TinEye

Reverse Image Search

Search by image and find where that image appears online.

dotcom-tools

Free Online Website Performance Tools

Instantly get a snapshot of your website availability and performance from nearly two dozen locations around the world.

Solis

Live Design Output for Mac

Delivering real time, multi viewport previewing of HTML, CSS, SCSS and LESS as you write it.

BONSAI

Free Freelance proposals

Create, send, and track proposals online.

FORMS

Forms. Simply done.

Forms.id is a powerful, yet simple platform for building forms and surveys. We put privacy first and offer a secure alternative to Google Forms & Typeform.

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.

Squoosh

Compress and optimize your images

Squoosh is a new powerful online tool from Google for compressing your images using new codecs.

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 Pie Chart Generator

Generates CSS Pie Charts

The conic-gradient() CSS function creates a background gradient with color transitions rotated around a center point.

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.

Tint & Shade Generator

Easily make tints and shades in 10% increments

The purpose of this tool is to accurately produce tints (lighter variants) and shades (darker variants) of a given hex color in 10% increments.

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.

Text Shadow Effects

HTML and CSS text shadow effect code examples

Collection of hand-picked free HTML and CSS text shadow effect code examples.

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.

Image Effects with CSS

Image manipulation via CSS

Choose your image, copy code.

animista

CSS animations on demand

Choose your animation, get code.

keyframes.app

An insanely simple way to create CSS animations

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor.

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.

Resume Worded

Write effective resumes

Get inspired by handpicked resume lines that helped candidates get into companies.

threed.io

Generate 3D Mockups right in your Browser

Upload your design, adjust settings and download your individual mockup. Threed is for free and needs no extra Software.

CSS text effects

Various CSS Text Effects

CSS text effects gallery we are using in Banner maker and Freefonts project.

basicScroll

Standalone parallax scrolling with CSS variables

basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.

Fontisto

fontisto the iconic font and css toolkit · 552+ free icons

Free icons.

BoxIcons

350+ Carefully designed icons set.

Free icons.