50+ websites for web developers
Tags: webdev, resources, programming, tooling
Published: 2022-11-02 11:42:12

After I have shared these two huge lists 
- [50+ websites for remote work](https://blog.ahmedzougari.com/50-websites-for-remote-work)
- [30+ websites for design inpiration](https://blog.ahmedzougari.com/top-30-webapp-design-inspiration-sites-for-your-next-project)

I decided to share another one. But this time you can contribute. The table below is from this [repository](https://github.com/zougari47/webdevs-tools).


And I will update the blog from time to time to make sure it's not outdated. So you can help by adding your favorite site or fixing typos, or broken links ...



|#|Name|Keywords|Description|
|:---|:---|:---|:---|
|1|[10015](https://10015.io)|Mixed|All online tools you need in one box for free. Build anything online with “all-in-one toolbox”. All tools are easy-to-use, blazing fast & free.|
|2|[Animate.css](https://animate.style/)|Froentend, CSS, Animation|Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.|
|3|[Animista](https://animista.net)|Frontend, CSS, Animation|Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.|
|4|[Ayro UI](https://ayroui.com)|Frontend, Bootstrap, UI Library|Free Bootstrap Snippets, UI Components, and Library | Ayro UI.|
|5|[Bg Jar](https://bgjar.com)|Frontend, CSS, SVG, Background|Free svg background generator for your websites, blogs and app.|
|6|[Blob Maker](https://www.blobmaker.app)|Frontend, CSS, SVG|Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.|
|7|[Box-shadow.dev](https://box-shadow.dev)|Frontend, CSS, Box-shadow|Customize Shadows.|
|8|[Branition Colors](https://branition.com/colors)|Frontend, CSS, Colors|Hand-curated collection of color palettes best fitted for branding.|
|9|[CSS Box Shadow Examples](https://getcssscan.com/css-box-shadow-examples)|Frontend, CSS, Box-shadow|Beautiful CSS box-shadow examples.|
|10|[CSS Buttons Examples](https://getcssscan.com/css-buttons-examples)|Frontend, CSS, Buttons|🎨 Curated collection of 88 free beautiful CSS buttons, ready-to-use for your next projects. Click to copy.|
|11|[CSS Gradient](https://cssgradient.io)|Frontend, CSS, Colors, Gradient|CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites.|
|12|[CSS Grid Generator](https://cssgrid-generator.netlify.app)|Frontend, CSS, Grid|CSS Grid generator.|
|13|[CSS Triangle Generator](http://apps.eky.hk/css-triangle-generator)|Frontend, CSS, Border|CSS triangle generator - A generator for pure CSS triangle.|
|14|[Charts CSS](https://chartscss.org)|Frontend, CSS, Charts|CSS data visualization framework.|
|15|[Clippy](https://bennettfeely.com/clippy)|Frontend, CSS, Clip-path|The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.|
|16|[ColorHub](https://www.colorhub.app)|Frontend, CSS, Colors|Find the perfect color palette for your next project.|
|17|[ColorHunt](https://colorhunt.co)|Frontend, CSS, Colors|Color Palettes for Designers and Artists.|
|18|[ColorPalettes](https://colorpalettes.colorion.co)|Frontend, CSS, Colors|30+ Hand curated color palettes. To see the preview just click on the palette.|
|19|[ColorsMuzLi](https://colors.muz.li)|Frontend, CSS, Colors|Color Palette Generator. Create Beautiful Color Schemes that works.|
|20|[Convert A Color](https://convertacolor.com)|Frontend, CSS, Colors|Convert a color to different formats.|
|21|[Cool Backgrounds](https://coolbackgrounds.io)|Frontend, CSS, Background|Cool Backgrounds is a collection of tools to create compelling, colorful images for blogs, social media, and websites.|
|22|[Cool Backgrounds](https://mycolor.space)|Frontend, CSS, Colors|Never waste Hours on finding the perfect Color Palette again!|
|23|[CoolHue](https://webkul.github.io/coolhue)|Frontend, CSS, Colors, Gradient|60 linear gradients collection.|
|24|[Coolors](https://coolors.co)|Frontend, CSS, Colors|The super fast color palettes generator!|
|25|[Cubic Bezier](https://cubic-bezier.com)|Frontend, CSS, Animation|A better tool for cubic-bezier() easing.|
|26|[Doodad Pattern Generator](https://doodad.dev/pattern-generator)|Frontend, CSS, SVG, Background|Generate seamless, unique, royalty-free patterns to use for free in any project. Export as SVG, JPEG, or PNG.|
|27|[Fancy Border Radius](https://9elements.github.io/fancy-border-radius)|Frontend, CSS, Border-radius|Generator to build organic shapes with CSS3 border-radius.|
|28|[Flat UI Colors](https://flatuicolors.com)|Frontend, CSS, Colors|280 handpicked colors ready for COPY & PASTE.|
|29|[Flowbite](https://flowbite.com)|Frontend, CSS, Tailwind|Get started with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.|
|30|[Flowbite](https://flowbite.com)|Frontend, CSS, Tailwind|Get started with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.|
|31|[Frontend Toolkit](https://www.fetoolkit.io)|Mixed|Frontend Toolkit is a customizable dashboard for your recurring Frontend tasks. Base64 encoder/decoder, SVG optimizations, SVG to JSX and many more!|
|32|[Get Waves](https://getwaves.io)|Frontend, CSS, SVG, Waves|A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!|
|33|[Grid Layoutit](https://grid.layoutit.com)|Frontend, CSS, Grid|CSS Grid generator.|
|34|[Headless UI](https://headlessui.com)|Frontend, Tailwind, React, Vue, UI Library|Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.|
|35|[Layout Bradwoods](https://layout.bradwoods.io)|Frontend, CSS, Grid, Flex|CSS Grid/FLEX generator.|
|36|[Lottiefiles](https://lottiefiles.com)|GIF, Animation|The world’s largest platform for Lottie animations. Add free animations anywhere (even if you don’t know motion design) or create, collaborate & ship motion easily with LottieFiles’ design & developer tools.|
|37|[MeshGradient](https://meshgradient.com)|Frontend, CSS, Colors, Gradient|Create beautiful gradients.|
|38|[Moving Letters](https://tobiasahlin.com/moving-letters)|Frontend, CSS, JS, Animation, animejs|Text animated with JavaScript & anime.js.|
|39|[Neumorphism](https://neumorphism.io)|Frontend, CSS, Box-shadow|Generate Soft-UI CSS code.|
|40|[Next UI](https://nextui.org)|Frontend, Next, React, UI Library|Make beautiful websites regardless of your design experience.|
|41|[Open Props](https://open-props.style)|Frontend, CSS|Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.|
|42|[SVG Wave](https://svgwave.in)|Frontend, CSS, SVG, Waves|SVG Wave is a minimal svg wave generator with a lot of customization. It lets you ability to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs.|
|43|[Shadows.brumm.af](https://shadows.brumm.af)|Frontend, CSS, Box-shadow|Make a smooth shadow, friend.|
|44|[Spinkit](https://tobiasahlin.com/spinkit)|Frontend, CSS, Animation|Simple CSS Spinners.|
|45|[Tails](https://devdojo.com/tails/v1/app)|Frontend, CSS, Tailwind|Tails - TailwindCSS Page Builder.|
|46|[Tailwind Components](https://tailwindcomponents.com)|Frontend, CSS, Tailwind|A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!|
|47|[Tailwind Kit](https://www.tailwind-kit.com)|Frontend, CSS, Tailwind|Over 200 free and open source components and templates for tailwind css to build beautiful UI. All are fully coded and work with React, Angular and VueJS.|
|48|[Transition Style](https://transition.style)|Frontend, CSS, Animation|Drop-in CSS transitions.|
|49|[UI Verse](https://uiverse.io)|Frontend, HTML, CSS, UI|Universe of UI elements made with HTML & CSS.|
|50|[Vizzu](https://lib.vizzuhq.com)|Frontend, CSS, Charts, Javascript|Open-source JavaScript library designed to easily create animated data visualizations and data stories.|
|51|[Web Gradients](https://webgradients.com)|Frontend, CSS, Colors, Gradient|WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.|
|52|[Whirl](https://whirl.netlify.app)|Frontend, CSS, Animation|CSS loading animations with minimal effort!|
|53|[Woah](https://joerezendes.com/projects/Woah.css)|Frontend, CSS, Animation|Woah.css is a CSS animation library created by Joe Rezendes that was made for eccentric developers.|