Generator CSS Color SVG Reference Code Vector Effects Fonts App Compression Photos Gradients Inspiration Icons Patterns Editor Illustrations Shadow Minify Apple HTML Maps Images Filters Pixel Characters Typography Animation Bookmarklet OS Lorem Ipsum Textures QR-Code Wordpress Style Guide Javascript Emoji Avatar Audio calculator Youtube drawing collaboration Security

Welcome!

A web developers toolbox with currently 112 resources.

---

Easing Gradients

Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.

larsenwork.com/easing-gradients

Shadow Palette Generator

Create a set of lush, realistic CSS shadows

www.joshwcomeau.com/shadow-palette

URL-encoder for SVG

Encoded SVG can be used in background, in border-image or in mask

https://yoksel.github.io/url-encoder

witeboard

Witeboard is the fastest way to collaborate real-time with your team anywhere.

witeboard.com

YouTube Video Thumbnail Images

Get YouTube Video Thumbnail Images for free

youtubethumbnail.download

Min-Max-Value Interpolation

Create fluid scales for type and spacing using CSS clamp() and not relying on media queries.

min-max-calculator.9elements.com

Haikei

An all-around generator with blob, wave, gradients, low poly, and other modes, that can be further individually customized.

app.haikei.app

fffuel

fffuel is a collection of color tools and free SVG generators for gradients, patterns, backgrounds & decorative graphics

fffuel.co

Grainy Gradient playground

Explore the parameters that make up noisy gradients.

grainy-gradients.vercel.app

BASE64 Image

Convert your images to base64

www.base64-image.de

Type Scale

A Visual Type Scale

type-scale.com

CSS Hexagon, Please

CSS Hexagon Generator

brenna.github.io/csshexagon

Tint & Shade Generator

The purpose of this tool is to accurately produce tints (pure white added) and shades (pure black added) of a given hex color in 10% increments.

maketintsandshades.com

hue.tools

An open source toolbox for colors.

hue.tools

Coding Fonts (CSS Tricks)

Information about coding fonts: designers, character charts, features, and more.

coding-fonts.css-tricks.com

Radio Garden

Radio Garden invites you to tune into thousands of live radio stations across the globe

radio.garden

Cleanup.pictures

Remove objects, people, text and defects from any picture

cleanup.pictures

HexColorPedia

Color tool for everyone!

hexcolorpedia.com

Notion Avatar Maker

Choose your styles

notion-avatar.vercel.app

OpenMoji

Open source emojis for designers, developers and everyone else!

openmoji.org

Actionable Color Palettes

30+ Hand curated color palettes.

colorpalettes.colorion.co

Image Color Finder

Pick the best color combinations in any of your photos!

imagecolorfinder.com

fontisto

fontisto the iconic font and css toolkit

fontisto.com

Health icons

Free, open source health icons

healthicons.org

PINTR

Pinter New Image turns photos into funky and fun line images.

javier.xyz/pintr

Sorted CSS Colors

CSS colors sorted by their hue, saturation and lightness

//enes.in/sorted-colors/

Fontshare

ITF (the Indian Type Foundry) has launched a brand new font service to bring beautiful typography to every business for free.

www.fontshare.com

Colorie

Create your Color Palette with up to 14 Colors.

colorie.web.app

1loc – Favorite JavaScript single line of code

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

1loc.dev

Responsively

Preview all target screens in a single window side-by-side.

responsively.app

Ray.so – Create beautiful images of your code

Turn your code into beautiful images. Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.

ray.so

A11Y Style Guide

Style guide and pattern library promoting accessible components and WCAG compliance criteria.

a11y-style-guide.com

The Component Gallery

The Component Gallery is a collection of components from the best Design Systems.

component.gallery

themer

themer takes a set of colors and generates themes for your development environment.

themer.dev

Blobs

Blobs – Generate beautiful blob shapes for web and flutter apps.

blobs.app

READ2BURN

Transfer Secrets Securely

www.read2burn.com

Pixelr

Convert any image into pixel art.

pixelr.art

Free Ruler 2.0

A ruler application for macOS.

pascal.com/software/freeruler/

ImageOptim

ImageOptim makes images load faster. Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality.

imageoptim.com

Pika

An open-source colour picker app for macOS.

superhighfives.com/pika

JPEG.rocks

Privacy-aware JPEG optimizer. The images you upload never leave your device: all the processing is done entirely in the browser.

jpeg.rocks

Gift of Speed

Page speed tools. CSS, JS, GZIP, Images etc.

www.giftofspeed.com

Texture Fabrik

Textures, Patterns, Vector Graphics ‘n’ stuff.

texturefabrik.com

Parametric Color Mixer

A color palette composer inspired by audio parametric equalizers. Create beautiful color palettes with a scientific precision.

colormixer.web.app

Pattern Generator & Image Dithering

Create unique, seamless, royalty-free patterns.Choose a base style, then customize with colors, filters, and transforms.

doodad.dev

CSS Gradient Generator

Gradient Generator for Linear and Radial Css Color Gradients.

www.css-gradient.com

FarbVélo

Random Color Cycler. Generative color harmonies. The random color expolorer.

farbvelo.elastiq.ch

MacMenuBar

A curated directory of 500+ Mac menu bar apps. Small apps to help you become more productive and maximize your workflow with MacOS.

macmenubar.com

Can i use

“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

caniuse.com

Picular

Search for colors by keywords.

picular.co

Dev Fonts

List of the best fonts for coding with live preview.

devfonts.gafi.dev

Grabient

Beautiful and simple UI for generating web gradients.

www.grabient.com

boxshadows

Create and tweak CSS box-shadows.

boxshadows.com

Type Sample

Type Sample is a tool for identifying and sampling webfonts, as a browser extension or bookmarklet.

www.typesample.com

Tint and Shade Generator

The purpose of this tool is to accurately produce tints (pure white added) and shades (pure black added) of a given hex color in 10% increments.

maketintsandshades.com

Adobe Photoshop Express

Crop, retouch, and add filters to your images right from your browser with the Adobe Photoshop Express online image editor.

photoshop.adobe.com

TablePlus

Database management made easy. Modern, native, and friendly GUI tool for relational databases: MySQL, PostgreSQL, SQLite & more.

tableplus.com

svg box

SVGBox makes it dead-easy to include icons in your project. Simple <img/> tags: that’s all you need. No CSS, JS, file uploads, or inline SVGs.

svgbox.net

National Geographic MapMaker Interactive

MapMaker Interactive allows you to choose from a variety of base maps depending on the information you want to display on your map.

mapmaker.nationalgeographic.org

HTML5 Doctor

Helping you implement HTML5 today.

html5doctor.com

WordPress Query Args

WordPress Query Comprehensive Reference

gist.github.com/luetkemj/2023628

cdnjs

cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your websites.

cdnjs.com

PageSpeed Insights

PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

developers.google.com/speed/pagespeed/insights

CSS Tricks

Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

css-tricks.com

Flexbox Cheat Sheet

A simple visual cheatsheet for flexbox. Learn all about the properties available in flexbox through simple visual examples.

flexbox.malven.co

CSS Vocabulary

apps.workflower.fi/vocabs/css/en

Can I use?

Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

caniuse.com

ReCSS

A bookmarklet to refresh the CSS of your currently open webpage.

www.paulirish.com/2008/how-to-iterate-quickly-when-debugging-css

CodePen

Online Code Editor and Front End Web Developer Community. The best place to build, test, and discover front-end code.

codepen.io

Little Big Details

Your daily dose of design inspiration.

littlebigdetails.com

Free Frontend

Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles.

freefrontend.com

Gzip compression test

Test a webpage to see if compression is enabled.

varvy.com/tools/gzip

ATOM

A hackable text editor for the 21st Century.

atom.io

Sublime Text

A sophisticated text editor for code, markup and prose.

www.sublimetext.com

Normalize.css

A modern, HTML5-ready alternative to CSS resets.

necolas.github.io/normalize.css

CSS Minifier

Online CSS Minifier/Compressor. Free! Provides an API. Simple Quick and Fast.

cssminifier.com

SVGOMG!

A SVG Minifier. Web GUI for SVGO.

jakearchibald.github.io/svgomg

Gradient Generator

The tool generates a stepped gradient between 2 colors.

colordesigner.io/gradient-generator

Film Emulator

Free online analog film emulator.

29a.ch/film-emulator

Scale

Color Scale Generator

hihayk.github.io/scale

Coolors

The super fast color schemes generator.

coolors.co

BrandColors

The biggest collection of official brand color codes around. Curated by @brandcolors and friends.

brandcolors.net

Color Tool

Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

material.io/resources/color

Copychar

A basic app that allows you to find and copy special characters to your clipboard.

copychar.cc

Squoosh

Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors.

squoosh.app

Animate.css

Just-add-water CSS animations.

animate.style

Google Fonts

Making the web more beautiful, fast, and open through great typography.

fonts.google.com

Font Awesome

Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

fontawesome.com

Neumorphism.io

Generate Soft-UI CSS code

neumorphism.io

avataaars generator

avataaars generator is a free online avatar generator for anyone to make their beautiful personal avatar easily.

getavataaars.com

Open Peeps

A hand-drawn illustration library.

www.openpeeps.com

Animista

CSS Animations on demand.

animista.net

Noun Project

Icons and Photos For Everything.

thenounproject.com

Blobmaker

Make organic SVG shapes with Blobmaker.

www.blobmaker.app/

Get Waves

Make some waves!

getwaves.io

Pexels

The best free stock photos & videos shared by talented creators.

www.pexels.com

Toycamera Analogcolor

Transform your digital images to analog-like pictures.

www.pentacom.jp/pentacom/toycamera_analogcolor

Loripsum

The ‘lorem ipsum’ generator that doesn’t suck.

loripsum.net

CSS Gradient

CSS Gradient is a happy little free tool that lets you create a gradient background for websites.

cssgradient.io

brumm.af/shadows

Make a smooth shadow, friend.

brumm.af/shadows

QR Code Generator

Create your QR Code for free.

www.qr-code-generator.com

Trianglify

Trianglify.io is a tool to generate low-poly backgrounds, textures, and vectors.

trianglify.io

Squircley!

Squircley is all you need to start creating beautiful organic shapes ready to use for logos, icons and background images.

squircley.app

White-box-Cartoonization

Official tensorflow implementation for CVPR2020 paper “Learning to Cartoonize Using White-box Cartoon Representations”

github.com/SystemErrorWang/White-box-Cartoonization

Pixel Map Generator

pixelmap.amcharts.com

city roads

This website renders every single road within a city.

anvaka.github.io/city-roads/

humaaans

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

www.humaaans.com

Ouch

Free vector illustrations to class up your project

icons8.com/illustrations

IRA Design Elements

Discover IRA illustrations to power up your project.

iradesign.io/illustrations

unDraw

Browse to find the images that fit your needs and click to download. Use the on-the-fly color image generation to match your brand identity.

undraw.co/illustrations

Unsplash

The internet’s source of freely-usable images. Powered by creators everywhere.

unsplash.com

BGJar

Free svg background generator for your websites, blogs and app.

https://bgjar.com/

bgjar.com