Webdev tools

Drag handles around to design CSS easing curves visually.

PhotoGradient is an online design tool that lets you transform your photos into smooth, vibrant mesh gradients—those dreamy blends of color and abstract shapes. Designers can upload an image, and the tool processes it into a beautiful gradient that can be downloaded or directly used as CSS code to sprinkle magic into your web projects or visual designs. It's especially handy for adding an artsy, seamless flair to backgrounds or overlays.

Lottielab is a web-based tool that simplifies the creation and editing of Lottie animations. It allows users to import assets from design tools like Figma or start from scratch, providing an intuitive interface for animating with ease and speed. Lottielab supports exporting animations to various platforms, including iOS, Android, and the web, ensuring seamless integration into your projects.

Super Color Palette is a free online tool for discovering and generating stunning color palettes. Designed for designers, developers, and creatives, it provides an extensive library of curated palettes and allows users to create custom combinations for their projects. With its simple interface, Super Color Palette is a go-to resource for inspiration and color selection.

Templated is a website that has a collection fo pre-built website templates for anyone to download and use on their own projects. If you aren't an amazing HTML/ CSS developer, this is the place for you. Templated gives you everything you need to have a completed website ready to go. All you need to do is replace text and images with your own data. With over 800 templates, you'll find something that will suite you needs and be visually appealling as well.

Wakamai Fondue is a browser-based tool designed to help you explore the capabilities of your fonts. By uploading a font file, you can uncover its OpenType features, character sets, and stylistic alternates. The tool also provides the necessary CSS code to implement these features on the web. All processing occurs locally in your browser, ensuring your font files remain private.

Accessibility Developer Guide is online documentation that provides guidelines and best practices on how to add accessibility features to your websites. It may be useful for other code environments, but its focus is on the web. The website covers many topics on how to make your website more accessible to people who may have disabilities like colorblindness and tips on how to improve the user experience on mobile devices compared to desktop environments. the documentation is provided under...

Build animated, tileable SVG patterns and copy the code.

Checklist Design is a free resource created by George Hatzis, offering curated checklists to help designers and developers ensure their UI/UX work follows best practices. It covers areas like pages, elements, user flows, accessibility, and branding, making it useful for both beginners and seasoned professionals. The site also features a Figma Starter Kit and designer interviews.

Howler.js is a lightweight JavaScript audio library that simplifies audio playback across all browsers and platforms. It defaults to the Web Audio API but gracefully falls back to HTML5 Audio when needed. Key features include audio sprites for efficient sound management, spatial audio for immersive experiences, and support for a wide range of audio codecs. With no external dependencies and a modular design, it's ideal for games, music apps, and interactive web projects.

OpenWeatherMap is an online service providing real-time weather data, forecasts, and historical information globally. It offers detailed weather parameters like temperature, humidity, and wind speed. Widely used by developers, its API allows easy integration into apps and websites. The service also includes weather maps, air pollution data, and severe weather alerts.

Those inverted rounded corners that are weirdly hard to do in CSS.

ComposeIcons.com is a resource that offers a large collection of popular icon libraries converted to Jetpack Compose Image Vectors. It simplifies the process of finding and integrating icons into Android apps developed using Jetpack Compose. The site ensures developers have access to an extensive range of icons, making it easier to enhance app design without the hassle of converting or sourcing icons manually.

FreePublicAPIs.com is a curated directory of over 300 free, public APIs for developers and students. The APIs span various categories, including development, entertainment, health, and data. The site allows users to easily search, filter, and find APIs that suit their needs, with daily health checks to ensure reliability. It's a helpful resource for anyone looking to integrate external data or functionalities into their applications without incurring costs.

Turn any GIF into an animated browser tab favicon.

Porkbun is an ICANN-accredited domain name registrar based in the Pacific Northwest, offering a range of services including domain registration, web hosting, email hosting, and SSL certificates. They are known for their competitive pricing, with .COM domains starting at $11.06 per year. Porkbun also provides free WHOIS privacy, URL forwarding, and email forwarding with domain registrations.

WebAIM (Web Accessibility In Mind) is a nonprofit organization based at Utah State University, dedicated to making the web more accessible for people with disabilities. Since 1999, they've provided resources, training, and tools to help individuals and organizations create accessible web content. Their free WAVE tool evaluates website accessibility, and they offer services like audits, consulting, and courses. WebAIM also conducts research, such as the annual “WebAIM Million” report, which...

Mesher by CSS Hero is a free online tool that generates customizable CSS mesh gradients for web design. It allows users to create unique, vibrant, and seamless gradients with ease, offering a live preview and downloadable CSS code for immediate use in projects.

Turso is a modern database platform built on libSQL, a fork of SQLite, designed to enhance application development across various platforms. It offers features like unlimited databases for multi-tenant AI applications, on-device AI capabilities with local vector search, and offline write support with automatic synchronization. Turso ensures data privacy with on-device processing and provides SDKs for mobile platforms to build offline-capable apps.

NameSilo is an ICANN-accredited domain registrar and web hosting company based in Phoenix, Arizona. Founded in 2010, it offers a range of services including domain registration, web hosting, email hosting, and SSL certificates. Known for its competitive pricing, NameSilo provides free WHOIS privacy, email forwarding, and DNS management with domain registrations. As of December 2019, NameSilo managed over 3.4 million active domains, placing it among the top 15 registrars worldwide.

This website created by Adam Greenough has a large list of other useful sites and tools for primarily web developers. Anything you could need to help you in your web dev journey is here, from CSS tools, to domain hosting sites. Addy Codes Toolkit has everything you need to enhance your web dev experience with a clear UI and easy to read information, it's a one stop shop for everything web dev.

Laws of UX is a visually pleasing website that teaches you about the rules and guildlines to improving your UX design. There are 20 different pages covering a range of topics related to UX. The website itself doesn't have a lot of depth for each topic, but it does point you in the right direction for further reading with links provided on each topic.

Uiverse.io is an open-source library of UI elements contributed by a community of developers and designers. Users can access and copy HTML/CSS, Tailwind, React, and Figma code for various UI components, like buttons, cards, and loaders. It's designed to be a free resource for personal and commercial use, providing customizable UI elements to streamline development and design work. The site encourages collaboration and sharing within its developer community.

Convex is a platform that simplifies the development of real-time, scalable web applications by providing a fully managed backend. It handles data storage, synchronization, and serverless functions, allowing developers to focus on building their apps without worrying about infrastructure. With automatic scaling, real-time updates, and secure data handling, Convex is ideal for creating interactive applications like chat apps and collaborative tools, all within a JavaScript/TypeScript...

Lucide is an open-source icon library offering over 1,600 customizable SVG icons. It's a community-driven fork of Feather Icons, created to address maintenance issues in the original project . Lucide supports various frameworks, including React, Vue, Svelte, Angular, and more, with tree-shakable packages to optimize performance . Users can easily adjust icon size, color, and stroke width to fit their design needs. The project is actively maintained and encourages community contributions.

Can I Use is a useful website for web developers as it lets you search up web features and API's to see what platforms and browsers those features are currently available on. It is very valuable information for a web developer, especially when you what to use more recently implemented features. The site gives a bit of information on what each browser's status is for each feature and if the next version of that browser could support a new feature.

30 Second of Code is an initiative that provides a "Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less." They also provide code snippets for other languages including CSS, Python and PHP. All of these code snippets are free to use in any way you like and they span a wide array of uses. No matter your skill level, this is a useful source of well written code to help your workflow and solve common coding problems you may encounter.