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.

If you need more comprehensive list of design tool, I recommend to take a look at flawlessapp.io/designtools.

jorgeatgu.github.io/svg-filters replaced by yoksel.github.io/svg-filters

replaced by 0to255.com removed

removed lucidcrew.com/csscorners/ removed

removed image-color.com added

added mazwai.com added

kisspng.com added

added livetools.uiparade.com/form-builder.html removed

removed livetools.uiparade.com/ribbon-builder.html removed

lorem2.com replaced by loremipsum.io

replaced by loremipsum.io border-image.com replaced by developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

replaced by css3-drop-shadows.herokuapp.com replaced by cssmatic.com/box-shadow

replaced by csswarp.eleqtriq removed

removed svgeneration.com removed

removed onlinefontconverter.com replaced by transfonter.org

replaced by websiteplanet.com/webtools/imagecompressor added

added undraw.co/illustrations added

added coverr.co added

Typography

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

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

pearsonified.com/typography – Golden Ratio Typography Calculator

pxtoem.com – PX to EM conversion

canva.com/font-combinations – Finding a font combination

fontpair.co – Collection of Google Fonts pairings

transfonter.org – Online font converter

Fonts collections

fontstruct.com/gallery – Collection of fonts (requires registration)

fonts.google.com – Google Fonts

fonts2u.com – Collection of free fonts

github.com/lvwzhen/iconpark – Collection of icon fonts

Colors, Palettes & Patterns

color-hex.com – Gives information about colors

colorhunt.co – Collection of color palettes

colourlovers.com – Collection of palettes, patterns, shapes and colors

colrd.com – Collection of palettes, patterns, gradients and colors

heropatterns.com – Collection of repeatable SVG background patterns

toptal.com/designers/subtlepatterns – Collection of patterns

patterncooler.com – Collection of pattern backgrounds

Color generators

color.hailpixel.com – Flat colors generator

colourco.de – Color generator

paletton.com – Color Scheme Designer

galactic.ink/sphere – Color spectrum generator

colorsupplyyy.com/app – Generate various color mixtures

Pattern editors

patterninja.com – Pattern editor

halftonepro.com/app – Pattern editor

qrohlf.com/trianglify-generator – Triangle pattern generator

kennethcachia.com/plain-pattern – SVG pattern editor

Gradient generators

uigradients.com – Collection of gradients

colinkeany.com/blend – Background gradient generator

Color palettes

flatuicolors.com – Collection of color palettes

colordrop.io – Collection of color palettes

color.adobe.com/explore – Collection of color palettes

flatuicolorpicker.com/category/all – Collection of flat colors

Color grabbers

lokeshdhakar.com/projects/color-thief – Grab the color palette from an image

www.colorhunter.com – Grab colors from images

image-color.com – Another colors grabber from images

webcolourdata.com – Grab colors from websites

Images, Illustrations, Videos

pixabay.com – Collection of free images

pexels.com – Collection of free images

unsplash.com – Collection of free images

free-images.com – Collection of free images

gratisography.com – Collection of free images

freephotos.cc – Collection of free images

kisspng.com – Collection of transparent png images

vecteezy.com – Collection of free vector art

undraw.co/illustrations – Collection of illustrations for free

iconfinder.com – Icon finder

coverr.co – Free cover videos

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

Image converters and editors

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

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

websiteplanet.com/webtools/imagecompressor – .png or .jpg compression into optimized .png (allows pictures up to 50MB size)

bse64.com – Encode your images into BASE64

lorempixel.com – Placeholder images generator

xiconeditor.com – Online icon editor

favicon-generator.org – Favicon generator

toptal.com/developers/css/sprite-generator – Css sprites generator

webresizer.com/resizer – Image editor

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

CSS

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

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

cssmatic.com/box-shadow – CSS drop shadows generator

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator – CSS border image generator

cssfilters.co – CSS filters editor

CSS gradient generators

colorzilla.com/gradient-editor – CSS gradient generator

css-gradient – CSS gradient generator

gradientgenerator.com – CSS gradient generator with patterns

angrytools.com/gradient – CSS gradient generator

CSS animation editors

theappguruz.com/tag-tools/web/CSSAnimations – Collection of CSS animations

anicollection.github.io – Collection of CSS animations

cssanimate.com – CSS animation generator

angrytools.com/css/animation – CSS animation generator

animista.net – CSS animation generator

jeremyckahn.github.io/stylie – CSS animation generator

waitanimate.wstone.io – CSS animation generator

CSS triangle generators

cssarrowplease.com – Generates a custom box with an arrow extending out from the side

apps.eky.hk/css-triangle-generator – CSS triangle generator

SVG

useragentman.com/tests/textpath/bezier-curve-construction-set – Bézier Curve generator

cssplant.com/clip-path-generator – Clip path generator

bennettfeely.com/clippy – Clip path generator

jxnblk.com/paths – Path generator

kazzkiq.github.io/svg-color-filter – SVG color filter editor

yoksel.github.io/svg-filters – SVG filter effects editor

gigacore.github.io/demos/svg-stroke-dasharray-generator – Dash line generator

editor.method.ac – SVG editor

Regex

regexr.com – Building and testing regular expressions

regex101.com – Building and testing regular expressions

Others

developers.google.com/speed/pagespeed/insights – Provides information about how well a page adheres to a set of best practices

easings.net – Collection of easing functions

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

Like this: Like Loading...

Edit January 08, 2020:Edit 22 June, 2019:Edit December 17, 2018: