All built and released this year, each of these free web apps offers a time-saving solution to many of the web design tasks you have to do from time to time. Without ever installing anything, all you have to do is bookmark and save them for that day when they are called upon.
Some of these tiny time savers will help you better assess your site’s accessibility, check your CSS for redundant classes, copy and paste CSS animations, beautify screenshots of your code, and more.
Whatever time savings you’re looking for in web design, chances are you’ll find it here.
If you’re looking for a collection of tiny web designer tools from last year, here they are.
Color Tools
A simple open source toolbox for working with colors. It includes, color mixing, blending, conversion, modification, detailed information, and more.
Huemint
This tool uses machine learning to create unique and beautiful schemes.
Color Name Generator
Enter a hex code and this app will name it, and generate CSS variables.
Alfredo
Create the perfect color scale with this online alpha generator.
Pattern & Gradient Generators
Mesh·y
This browser-based tool will help you create mesh gradients that can be exported as PNG images.
Gradients
Use this online tool to create complex gradients that can be exported in a variety of formats.
CSS Shaders
Copy & paste a colorful shadow gradient or design your own with this web-based tool.
Code Set Generators
Pie
This web-based tool will help you take beautiful screenshots that you can share on social media or blog posts.
Tweetlet
A free tool to generate shareable images of your tweets.
code.so
This browser app will help you create beautiful screenshots of your code snippets.
FabPic
Another free browser application for creating custom screenshots.
Image Effect Tools & Editors
Glitch Image Generator
A useful tool that allows you to create and save unique glitchy images.
Palette
Colorize your vintage photos with this AI-powered app.
Magic Eraser
Remove unwanted items from your images with this free tool.
Loaders
Find a range of loaders and rotators for your next project.
AnimatiSS
Use this collection of pre-made CSS animations in your projects.
Box Shadows
A curated collection of beautiful copy & paste box shadows for Tailwind CSS.
Vanilla Breeze
An online tool to convert Tailwind CSS elements to semantic CSS.
SEC Cloth Corners
This online tool will generate rounded corners using CSS clip-path.
Design Signal Generator
Use this tool to jumpstart your CSS projects.
MetalliCSS
This open source JavaScript library adds a metallic touch to any design element.
Filler interfaces
A small library of copy-and-paste placeholders for your design projects.
CSS Button Generators
Button Generator
Choose from a selection of attractive click-to-copy buttons for your project.
Interface Buttons
A collection of copy-and-paste CSS button styles to use in your projects.
100 Buttons
A free collection of 100 modern CSS button designs to use in your projects.
CSS Code Quality Analyzers
Css checker
Use this tool to identify redundant CSS classes.
CSS Code Quality Analyzer Online
This tool scores your CSS based on a range of quality guards.
CSS Minor
Paste your CSS into this app and it will minify your code.
Fonts & Typography Tools
Fallback Font Generator
This tool will help you avoid that pesky cumulative layout transition (CLS) in your layout.
Typographic Scale Calculator
Use this tool to create a harmonic type scale.
Bunny fonts
Check out this open-source, privacy-friendly web font platform.
Web Accessibility Tools
Web Accessibility Checklist
Use this checklist to create accessible websites and web applications.
A11Y Project Checklist
The issues that this checklist prompts you to check for cover a wide range of disabling conditions.
Contrast Grid
This tool will help you test different color combinations for WCAG 2.0 compliance.
Not an Accessibility Checklist
Use this list as a reference when assessing the accessibility of your site.
Learn Accessibility
Evergreen accessibility course and reference to level your web development.
Random11y
Use this tool to generate accessible random color palettes.
Icon Sets & Tools
Icon
Search through 36 libraries of free icons to find the right ones for your project.
Fundamentals
Download this collection of basic icons for product design and development.
CopySymbol
Looking for a symbol? This search engine will accommodate icon, keyboard shortcut, and CSS content code for copying and pasting.
App Glyphs
A handy library of copy & paste symbols to use in your projects.
Icons
Find the perfect icon collection for your project through this search tool.
Markdoc
A markup-based editor for creating custom, documented websites.
LetsMarkdown.com
Check out this open source collaborative markdown editor that works right from your browser.
a writer
Markup fans will want to try this minimal editor.
Code Snippet Search
This search engine will return code snippets relevant to your queries.
Copybook
This handy resource contains text commonly used in web applications.
Ethical Design Resources
A collection of articles, Organizations, tools, and more that promote ethics in design.
Heazy SVG Creator
Make custom SVGs with the help of this browser-based tool.
Prog
Test your programming knowledge with this language guessing game.
Type the RegEx
Test your RegEx skills with this puzzle game.
Movement
A free browser-based graphics editor.
metaSEO
A free web-based tool to quickly generate meta tags for your website or content.
Javascript Playground
Learn and improve your skills with this online tool.
