Generator CSS SVG Color Photos Vector Reference Compression Fonts Code Icons Effects Illustrations Maps Editor HTML Shadow Gradient Inspiration Minify Animation Filters Bookmarklet Pixel QR-Code Lorem Ipsum Characters Brands CDN Wordpress MySQL Database Typography

Welcome!

A web developers toolbox with currently 61 resources.

---

Get Lat Lon

Find the coordinates (latitude and longitude) of any place in the world.

internal

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