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

online tools Web development

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

Often times, as a front-end developer you are required to do tasks, which are more related to web design. For instance, you are asked to make some animations, add “nice background colors”, “readable fonts”, etc. As an engineer, dabbling in anything related to web design can be both fun and frustrating.

I use this list often when I develop front-ends. In this list you will find unique tools with a short description and a .gif preview or screenshot. I decided to make a preview of these tools, because if I want to use a specific tool, I remember only visual content of the tool, not the name or url.

I want to share this list of free online tools in form of web applications or web services for modern front-end development to help you create awesome websites and ease your web development workflow.

These online tools and resources for front-end developers falls into several categories: Colors, Palettes, Patterns, CSS Generators, Typography & Fonts, Icons, Editors, and Resources.

I created this list as a repository on Github. Feel free to contribute.

Edit 22 June, 2019:
  • kisspng.com added
  • livetools.uiparade.com/form-builder.html removed
  • livetools.uiparade.com/ribbon-builder.html removed
Edit December 17, 2018:
  • lorem2.com replaced by loremipsum.io
  • border-image.com replaced by developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
  • css3-drop-shadows.herokuapp.com replaced by cssmatic.com/box-shadow
  • csswarp.eleqtriq removed
  • svgeneration.com removed
  • onlinefontconverter.com replaced by transfonter.org
  • websiteplanet.com/webtools/imagecompressor added
  • undraw.co/illustrations added
  • coverr.co added

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.com pearsonified.com/typography pxtoem.com canva.com/font-combinations fontpair.co transfonter.org

Fonts collections

fontstruct.com/gallery fonts.google.com fonts2u.comgithub.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/apphalftonepro.com/app/polygonshalftonepro.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

CSS triangle generators

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

NEED A FULL STACK WEB DEVELOPER? LET'S BUILD SOMETHING.

GET IN TOUCH

Leave a Reply

Your email address will not be published. Required fields are marked *

SIGN UP TO GET NEW POSTS IN EMAIL

Holler Box

Welcome! Do you mind if I ask you a few questions?

How do you describe what you do for a living? (1/3)

Which of these best describes you? (2/3)

What's your BIGGEST challenge right now? (3/3)

Please tell me more

Please tell me more

Please tell me more

What brings you to this website? (3/3)

Please tell me more

Please tell me more

Name

Company

Email*

Phone Number

Holler Box
%d bloggers like this: