List of Free Online Tools For Front-end Web Development

online tools Web development

List of Free Online Tools For Front-end Web Development

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

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

websiteplanet.com/webtools/imagecompressor

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

tinypng.com

  • bse64.com – Encode your images into BASE64

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

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

livetools.uiparade.com/form-builder

livetools.uiparade.com/ribbon-builder

developers.google.com/speed/pagespeed/insights

easings.net

Leave a Reply

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