Generator CSS Color SVG Reference Code Vector App Effects Compression Photos Fonts Inspiration Editor Patterns Apple HTML Gradients Minify Maps Illustrations Icons Shadow Bookmarklet Typography Pixel Filters Animation Javascript Style Guide Security Textures OS Database MySQL Wordpress CDN Brands Characters Lorem Ipsum QR-Code

Welcome!

A web developers toolbox with currently 87 resources.

---

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