Skip to content
🔖 [2019] List of free online tools and resources in form of web applications or web services for front-end development. Each tool contains a short description with a .gif preview or a webpage screenshot.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
LICENSE
README.md css sprite generator update Jun 21, 2019

README.md

List of Free Online Tools For Front-end Web Development (2019)

List of free online tools and resources in form of web applications or web services for front-end development. Each tool contains a short description and preview as a webpage screenshot.

Typography

  • loremipsum.io - Simple and better way to grab Lorem Ipsum text content

loremipsum.io

  • gridlover.net/try - Establish a typographic system with modular scale and vertical rhythm

gridlover.net/try

pearsonified.com/typography

pxtoem.com

canva.com/font-combinations

fontpair.co

transfonter.org

Fonts collections

fontstruct.com/gallery

fonts.google.com

fonts2u.com

github.com/lvwzhen/iconpark

Colors, Palettes & Patterns

colourlovers.com

  • colrd.com - Collection of palettes, patterns, gradients and colors

colrd.com

heropatterns.com

toptal.com/designers/subtlepatterns

patterncooler.com

colorhunt.co

Color info

color-hex.com

  • 0to255.com - Finding lighter and darker colors based on any color

0to255.com

Color generators

color.hailpixel.com

colourco.de

paletton.com

galactic.ink/sphere

colorsupplyyy.com/app

Pattern editors

patterninja.com

halftonepro.com/app

halftonepro.com/app/polygons

halftonepro.com/app/stripes

qrohlf.com/trianglify-generator

kennethcachia.com/plain-pattern

Gradient generators

uigradients.com

colinkeany.com/blend

Color palettes

flatuicolors.com

colordrop.io

color.adobe.com/explore

flatuicolorpicker.com/category/all

Color grabbers

lokeshdhakar.com/projects/color-thief

colorhunter.com

webcolourdata.com

Images, Illustrations, Videos

pixabay.com

pexels.com

unsplash.com

free-images.com

gratisography.com

freephotos.cc

kisspng.com

vecteezy.com

undraw.co/illustrations

iconfinder.com

coverr.co

Image converters and editors

  • jpeg.io - Converts any major image format into a highly optimized JPEG

jpeg.io

  • tinypng.com - another compression tool which allows compressing .png and .jpg images (allows pictures up to 5MB size)

tinypng.com

websiteplanet.com/webtools/imagecompressor

bse64.com

lorempixel.com

xiconeditor.com

favicon-generator.org

toptal.com/developers/css/sprite-generator

webresizer.com/resizer

  • picsvg.com - Converts jpeg,jpg,gif,png picture to SVG

picsvg.com

CSS

westciv.com

  • css3maker.com - CSS editor and generators — border radius, gradient, transform, animation, transition, text shadow, box shadow, text rotation

css3maker.com

  • cssmatic.com - CSS generators — gradient, background patterns, box shadows, border radius

cssmatic.com

cssmatic.com/box-shadow

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

lucidcrew.com/csscorners

cssfilters.co

CSS gradient generators

colorzilla.com/gradient-editor

css-gradient

gradientgenerator.com

angrytools.com/gradient

CSS animation editors

theappguruz.com/tag-tools/web/CSSAnimations

anicollection.github.io

cssanimate.com

angrytools.com/css/animation

animista.net

jeremyckahn.github.io/stylie

  • waitanimate.wstone.io - calculate the keyframe percentages so that you can insert a delay between each animation iteration

waitanimate.wstone.io

CSS triangle generators

cssarrowplease.com

apps.eky.hk/css-triangle-generator

SVG

useragentman.com/tests/textpath/bezier-curve-construction-set

cssplant.com/clip-path-generator

bennettfeely.com/clippy

jxnblk.com/paths

kazzkiq.github.io/svg-color-filter

jorgeatgu.github.io/svg-filters

gigacore.github.io/demos/svg-stroke-dasharray-generator

editor.method.ac

Regex

  • regexr.com - Building and testing regular expressions

regexr.com

regex101.com

Others

developers.google.com/speed/pagespeed/insights

easings.net

You can’t perform that action at this time.