Web development
List of Free Online Tools For Front-end Web Development (updated 2020)
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 web apps, you can also check insiderapps.com.
Edit January 08, 2020:- jorgeatgu.github.io/svg-filters replaced by yoksel.github.io/svg-filters
- 0to255.com removed
- lucidcrew.com/csscorners/ removed
- image-color.com added
- mazwai.com added
- kisspng.com added
- livetools.uiparade.com/form-builder.html removed
- livetools.uiparade.com/ribbon-builder.html removed
- 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
- 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
- www.chamberofcommerce.org/findaphoto – Stock photo search across multiple free and paid stock photo sites
- 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
- westciv.com/tools/3Dtransforms – gradients/transforms editor
- 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
