Sammlungen von
Web & Graphic Design Tools & Assets
(Mostly free)
Category
Subject
N/A
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.
N/A
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.
N/A
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.
Logo Design Article
4 Principles of Great Logo Design
If you are a consumer or a marketer or a CEO of a company, you should be interested in what makes a great logo.
Form design
Best practices for the online form design
From zero to hero all in one blog post.
Logo Design Article
7 Tips on presenting logos to a client
Logo presentation can be one of the most important pieces of the logo design process.
Top 74 Logos
Original list by ZankRank
good for education and inspiration.
logolounge
Logo catalogue
Good for inspiration and education.
N/A
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.
N/A
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.
N/A
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.
N/A
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.
N/A
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.
N/A
AOS
Animate On Scroll Library
Variety of animate-on-scroll animations.
N/A
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.
N/A
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.
N/A
15 Free Icon Sets
Article about free flat icons
When it comes to web design, and especially UI design, icons play a crucial role.
N/A
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.
N/A
Rellax.js
Dynamic parallax scrolling effect, without dependencies
Free open source plugin built on vanilla JavaScript, so it doesn’t have any dependencies.
N/A
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.
N/A
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.
N/A
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.
N/A
CSS Grid Cheat Sheet
Your ultimate CSS grid visual guide
Simple CSS Grid generator.
N/A
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.
N/A
Ceaser
CSS Easing Animation Tool
Great tool to create code for your CSS animation easing.
N/A
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.
N/A
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.
N/A
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.
N/A
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.
N/A
Flexbox Grid
A grid system based on the flex display property
Grid framework based on Flexbox.
N/A
Solved by Flexbox
Cleaner, hack-free CSS
A guide to Flexbox.
N/A
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.
N/A
iHover
CSS3 hover effects pack
iHover is an impressive hover effects collection, powered by pure CSS3.
N/A
Image Hover Effects
CSS image hover effects
Choose your animation, get code.
N/A
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.
N/A
Vivus Instant
SVG Stroke animation
Simply drag and drop your stroke based SVG and set your options.
N/A
CSS Shake
Some CSS classes to move your DOM!
Collection of shake animations.
N/A
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.
N/A
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.
N/A
Logo Crunch
Multi-resolution logo maker
Logo Crunch is a multi-resolution logo maker, it uses computer vision to make your high-res logo legible at lower resolutions.
N/A
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.