Skip to content

🔖 [2020] 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.

License

Notifications You must be signed in to change notification settings

AndrejGajdos/List-of-Free-Online-Tools-For-Front-end-Web-Development

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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

color-hex.com

colorhunt.co

colourlovers.com

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

colrd.com

heropatterns.com

toptal.com/designers/subtlepatterns

patterncooler.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

image-color.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

  • mazwai.com - Free cinematic videos under a CC BY 3.0 License

mazwai.com

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

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

yoksel.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

About

🔖 [2020] 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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published