🎊 awesome-webdesign-tools

An awesome list of tools for web designers and developers — websites, libraries, utilities, and more.

---

Contributions

Contributions are welcome! See CONTRIBUTING.md for guidelines on adding tools, entry format, and how to submit a pull request.

Table of contents

• Icons
• Colors
• Designs
• Shape makers
• Fonts
• Layouts
• CSS loaders
• Utils
• Learning
• Good for you
• Components UI
• AI

Icons

• 3DIcons - 1440+ beautifully crafted open-source 3D icons, free for personal and commercial use without attribution.
• Boxicons - High-quality open source web icons for designers and developers.
• Core UI - Premium-designed free icon set in SVG, JavaScript, and webfont formats.
• CSS icons - App for css.gg icons with custom selection for all pure CSS icons.
• Digital nomad icons - Digital nomad themed set of 25 high-resolution flat icons, free to use.
• Feather - Simply beautiful open source icons.
• Flaticon - Free icons and stickers in PNG, SVG, EPS, PSD, and CSS formats.
• Font Awesome - The internet's icon library and toolkit used by millions of designers and developers.
• Favicon Generator - Generate favicons from text, images, or emojis.
• FavPNG - Database of 16+ million free transparent PNG files.
• Free PNG IMG - Free PNG images, cliparts, and icons with transparent backgrounds in high quality.
• Heroicons - Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.
• Heroicons (dev version) - MIT open source interface icons for web and app development.
• Iconer - Curated collection of icons from multiple libraries.
• Iconfinder - Marketplace for icons, illustrations, and 3D assets in SVG, AI, and PNG format.
• Iconmonstr - Free simple icons for your next project.
• Iconscout - 8.2M+ free or premium vector icons, illustrations, 3D assets, and Lottie animations.
• Icons8 - Icons, photos, vector illustrations, and music for your videos.
• Icones - Searchable collection of icon sets for web projects.
• ICONSVG - Find, customize, and generate common SVG icons for your project.
• Ikonate - Customize, adjust, and download free vector icons.
• Noun Project - Diverse collection of 5M+ free icons and stock photos in SVG and PNG.
• PNG Tree - Millions of free PNG images, backgrounds, vectors, PSD, AI, and EPS files.
• Radix Icons - Crisp set of 15×15 icons designed by the WorkOS team.
• Shape.so - 36,000+ customizable icons and illustrations exportable to SVG, Lottie, and React.
• StickPNG - Community-shared transparent PNG images for personal and educational projects.
• Streamline Icons - 177,000+ icons in line, bold, color, and more styles.
• SVG Artista - Create SVG drawing animations by animating stroke and fill properties.
• SVG Backgrounds - Customizable SVG-based repeating patterns and backgrounds.
• svgicons - Ready-to-use SVG icons for the web.
• SVG Repo - 500,000+ open-licensed SVG vectors and icons.
• Tabler Icons - 800+ highly customizable free SVG icons.
• Tilda - 400+ free vector icons in 27 sets for landing pages.
• VisualPharm - 400k free icons available for download in SVG and PNG.
• Zwicon - Open icon library originally built to support work at @zwoelf.
• Blush - Free customizable illustrations made by artists worldwide.
• Peeps Avatar Builder - Build custom 3D-style avatar illustrations by UI8.
• Sapiens Character Builder - Character builder for illustrations by UI8.

Colors

• Bada55 - Find memorable hex color words for your CSS code.
• Color Designer - Palette generator, gradient generator, and color name finder.
• Color Forge - Generate and explore color palettes with CSS export. Free, no signup required.
• Color Hunt - Hand-picked color palettes for design and art projects.
• Color Palette Earth - Daily color palette inspiration from nature.
• Color Picker - Free online color picker with HEX, RGB, and HSL conversion.
• Color Slurp - Pick, edit, and copy colors with a color picker for Mac and iOS.
• ColorTools - Free browser-based image color picker with a color wheel, palette generator, CSS gradient builder, color converter, and WCAG contrast checker.
• Contrast Checker - Check WCAG color contrast ratios for accessibility compliance.
• CSS Gradient - Create colorful gradient backgrounds for websites, blogs, and social profiles.
• CSS Gradient Generator - Create CSS gradients with a visual editor and copy code instantly.
• Easing Gradient - Supercharge gradients with non-linear color mix and custom color spaces.
• FastTool Design - Color picker, palette generator, CSS gradient builder, contrast checker, and format converters.
• Flat UI Colors - 280 handpicked colors ready to copy and paste.
• gen8x - Generate harmonious palettes with WCAG contrast checks; export as CSS, Tailwind, SCSS, or JSON.
• Grabient - Beautiful and simple UI for generating web gradients.
• Gradient Forge - Create CSS gradients with a visual editor and code output.
• Gradient Magic - Gallery of unique CSS gradients.
• InclusiveColors - Accessible Tailwind-style UI palette creator with WCAG/APCA contrast checks and CSS/Figma export.
• Paletton - Color wheel tool for creating harmonious color combinations (formerly Color Scheme Designer).
• Palette Generator - Generate coordinated color palettes from a base color.
• Palettte App - Palette editing and remapping tool.
• Parametric Color - Color palette composer inspired by audio parametric equalizers.
• Shape Divider - Custom SVG shape dividers for section transitions.
• Tailwind CSS Color Explorer - Browse the Tailwind CSS v4 palette with live component previews.
• WebGradients - Free collection of 180 linear gradients for website backgrounds.

Designs

• Behance - Showcase and discover creative work from designers worldwide.
• Checklist Design - Collection of checklists for common UI/UX design patterns.
• Codrops - Destination for web design and development inspiration and tutorials.
• CodePen - Social development environment for front-end designers and developers.
• Code My UI - Handpicked web design and UI inspiration with code snippets.
• Component Gallery - Reference guide to UI components across design systems.
• CSS Buttons - Button collection focused on simplicity and ease of use.
• CSS Buttons Examples - Curated collection of CSS button examples.
• Checkboxes Examples - Curated collection of CSS checkbox examples.
• Design Systems Repo - Curated gallery of design systems.
• Dribbble - Community for discovering and sharing web design inspiration.
• Figma Community - Free design files, plugins, and resources from the Figma community.
• Free CSS - 3,500+ free website templates.
• Free Design Resources - Daily freebies for creatives.
• Free Frontend - Hand-picked code examples, tutorials, and articles.
• Godly - Curated gallery of the best web design inspiration.
• PageGuard - Free website health scanner for SEO, performance, accessibility, and best practices.
• Sketch App Sources - Thousands of UI/UX resources from designers worldwide.
• Sketch Repo - Free Sketch templates, icons, mockups, and UI kits.
• Tailwind UI Kit - 250 components and templates for React, Vue, and Angular.
• Toools Design - Curated design resources and tools.
• UI Faces - Sample profile avatars for mockups and prototypes.
• UI Store Design - 650+ free handpicked UI kits for real projects.
• UI8 - Curated design resources to speed up creative workflows.
• UIZZE - Public catalog of real web and iOS product UI references; full access adds hosted MCP workflows for coding-agent design contracts, validation, audits, and critiques.
• XD Guru - Adobe XD resources, UI kits, and templates.

Shape makers

• Animated Backgrounds - Collection of animated CSS backgrounds.
• Blobmaker - Generate organic blob shapes for designs.
• Box Shadow Generator - Visually build layered CSS box-shadows and export the code
• Clippy - CSS clip-path shape maker.
• CSS Filters - Visual playground for custom and Instagram-like CSS photo filters.
• CSS Glow Generator - Generate CSS glow and shadow effects.
• CSS Patterns - 100+ background patterns powered by CSS gradients by Temani Afif.
• Cubic Bezier - Visual editor for cubic-bezier easing curves.
• Custom Scrollbar Maker - Simple tool for creating custom scrollbars.
• Doodad Pattern Generator - Generate seamless patterns exportable as SVG, JPEG, or PNG.
• Fancy Border Radius - Build organic shapes with CSS3 border-radius.
• Get Waves - Create customizable SVG waves.
• Glassmorphism Generator - Generate frosted-glass UI styles.
• Hero Patterns - Repeatable SVG background patterns for digital projects.
• Keyframes.app - Browser-based tools for creating CSS keyframe animations.
• Magic Patterns - Pure CSS background patterns ready for production use.
• Neumorphism Generator - CSS generator for neumorphic colors, gradients, and shadows.
• OpenLayers Map Example - Accessible map example useful for placeholder map images.
• Quantity Queries - Tool for building CSS quantity queries.
• Shadow Forge - Design CSS box-shadows with a visual builder.
• Shadows Brumm - Smooth multi-layer CSS box-shadow generator.
• transition.css - Drop-in CSS page transition effects.
• Trianglify - Generate low-poly triangle patterns for wallpapers and assets.
• Wait Animate - Insert delays between CSS animation iterations without JavaScript.

Fonts

• 1001 Fonts - 56,000+ free fonts with commercial-use licenses.
• 1Fonts by AliMD - Collection of Farsi (Persian) and Arabic web fonts.
• Abstract Fonts - 10,000+ free fonts with web font download options.
• Font Converter - Convert font files between formats.
• Font Library - Open source project to tag and browse Google Fonts.
• Font Space - Free licensed fonts for design projects.
• Font Squirrel - Handpicked free fonts with commercial-use licenses.
• Fontsly - Large collection of free fonts browsable by style, type, and author.
• Glyphter - Create icon fonts by dragging SVGs onto a character grid.
• Typescale - Create typography scales, generate CSS, and find inspiration.
• BioFontsApp - A web-based utility for generating aesthetic fonts for social media with a clean, intuitive interface.

Layouts

• Box Sizing Generator - Visualize the box model and how box-sizing affects element size.
• CSS Grid Generator - Visual CSS grid layout generator.
• Flexbox Froggy - Game for learning CSS flexbox.
• Flexplorer - Interactive explorer for the CSS Flexible Box model.
• Grid Garden - Game for learning CSS grid layout.
• Layout Generator - CSS Grid and Flexbox generator for UI layout components.

CSS loaders

• CSS Loader Generator - Collection of 310+ CSS spinners and loaders to customize.
• CSS Loaders - Pure CSS loaders and spinners with source code.
• CSS Loading Animations - Online CSS loading animation generator.
• Loading.io CSS - 12 optimized CSS spinners for web projects.
• SpinKit - Simple CSS loading spinners.
• Whirl - Collection of CSS loading animations.

Utils

• All Tools Verse - 1,000+ free browser-based utilities for developers and designers, including code, data, text, image, document, and conversion tools. No signup required.
• Am I Responsive - Preview responsive design across four viewport sizes at once.
• App Doodler - Create multilingual App Store screenshots from reusable layouts and translation files.
• Base64 Encoder/Decoder - Encode and decode Base64 strings client-side.
• Base64 Image - Convert images to Base64 for use in HTML and CSS.
• BeginThings - 96+ free browser-based tools for freelancers including invoicing, time tracking, and QR codes.
• BulkPicTools - Bulk image processor for compress, convert, resize, and crop — no upload required.
• Can I Email - Support tables for HTML and CSS in email clients.
• Can I Use - Up-to-date browser support tables for front-end web technologies.
• Cleanmock - Create beautiful website and design mockups.
• CSS Ruler - Explore and compare CSS length units.
• CSS Toolkit - Box shadow, border radius, px-to-rem, text shadow, and animation generators.
• CSS Tools Online - Collection of CSS utilities for common developer tasks.
• DevTools - 16 free browser-based tools: JSON formatter, JWT decoder, regex tester, cron builder, and more.
• Down for Everyone or Just Me - Check if a website is down globally or only for you.
• EncodingBase64 - Base64 encoding and decoding for text, files, images, and URL-safe formats.
• Gitignore Generator - Generate .gitignore files for any project type.
• Haikei - Generate unique SVG design assets.
• Hash Generator - Generate MD5, SHA-1, SHA-256, and SHA-512 hashes client-side.
• Hidden Tools - Curated collection of unique online tools.
• Image Landscape Converter - Rotate portrait photos to landscape orientation in the browser.
• ImgTools - Compress, resize, crop, convert, watermark, and remove backgrounds from images.
• JSON Crack - Visualize and explore JSON data.
• JSON Formatter - Format, validate, and beautify JSON with syntax highlighting.
• JWT Decoder - Decode and inspect JSON Web Tokens directly in the browser.
• JWT Generator - Create signed JSON Web Tokens for testing and development.
• Keycode Info - Press any key to get its JavaScript key code and KeyboardEvent details.
• KeyboardTester.click Online Ruler - Browser ruler for measuring on-screen elements after calibration.
• Lorem Ipsum Generator - Generate placeholder text in custom lengths for mockups and layouts.
• NexTool - 228+ client-side developer tools including CSS generators, color tools, and formatters.
• Nutilz - Free browser-based calculators, text, image, and developer tools — no signup required.
• OneLang - Convert code between programming languages.
• Password Generator - Generate strong, random passwords with customizable length and character sets.
• Pixelate Image - Pixelate images instantly in the browser.
• PWA Manifest Generator - Generate a web app manifest with optimized icons.
• README Generator - Build a formatted README.md by filling in project details.
• QR Code Generator - Create scannable QR codes from text, URLs, or contact info.
• Quick Image Kit - Compress, resize, convert, crop images, and generate favicon packages in the browser.
• Really Good Emails - Curated email design inspiration for marketers.
• Regex Tester - Test and debug regular expressions with match highlighting.
• Remove Audio - Strip audio from video files locally via WebAssembly — no uploads.
• Slug Generator - Convert text to SEO-friendly URL slugs.
• SVG to JSX - Convert SVG markup to JSX for React apps.
• Text Diff Tool - Compare two texts with line-by-line diff highlighting.
• TextFaker - Create realistic text message screenshots and browser-based content-prep assets for demos and mockups.
• Typing Words GIF - Free online typing text GIF generator. Create typing animations and export as GIFs without signup. Perfect for GitHub READMEs, Discord status, and portfolio hero sections.
• TinyPNG - Popular tool for compressing PNG and JPEG images.
• TinyTools - Domain generator, OG image maker, favicon generator, and other browser-based utilities.
• ToolArks - Privacy-first toolbox with image compression and JSON formatting — 100% local.
• ToolBox - 170+ client-side tools for developers and designers.
• Toolio - 195 free browser tools including PDF, image, converter, and developer utilities — most run client-side with no upload.
• ToolSparkr - 35+ developer tools including JSON formatter, hash generators, and DNS lookup.
• Unix Timestamp Converter - Convert between Unix timestamps and human-readable dates.
• Unused CSS - Find and remove unused CSS rules from your stylesheets.
• URL Encoder & Decoder - Encode and decode URL components and percent-encoded strings locally in your browser.
• UUID Generator - Generate random UUID v4 values, including bulk generation.
• Webcode Tools - Generate common website sections and components.
• WhatRuns - Discover technologies used on any website.
• Zapsplat - 150,000+ free sound effects for creative projects.

Learning

• 1LOC - JavaScript utilities in one line of code.
• 30 Seconds of Code - Short code snippets for everyday development tasks.
• CodeWars - Practice coding through challenges and kata.
• CSS Author - Design and development blog with tutorials and resources.
• CSS Battle - CSS replication game for designers and developers.
• CSS Reference - Visual guide to popular CSS properties with animated examples.
• CSS-Tricks - Articles and guides about web design and development.
• Daily.dev - Developer news feed and learning community.
• Dev Community - Inclusive social network for software developers.
• DevDocs - Fast, offline documentation browser for developers.
• devhints - Collection of programming cheatsheets.
• egghead - Short video courses for modern web development.
• Flexbox Cheatsheet - Visual flexbox reference.
• Flexbox Froggy - Game for learning CSS flexbox.
• FreeCodeCamp - Free coding courses and certifications.
• Fun JavaScript Projects - Free JavaScript, HTML, and CSS project tutorials.
• Git Tutorial - Beginner-friendly Git tutorial from W3Schools.
• Grid Cheatsheet - Visual CSS grid reference.
• Grid Garden - Game for learning CSS grid layout.
• HTML Reference - Guide to HTML elements and attributes.
• Shortcode - Useful HTML, CSS, and JavaScript snippets and examples.
• SitePoint - Web design and development tutorials, courses, and books.
• WP Sessions - WordPress video tutorials from industry experts.

Good for you

• Get Station - Unify work tools in one productive desktop interface.
• GetTerms - Generate privacy policy and terms content for your website.
• HTTP Cat - HTTP status code API with cat images for error pages.
• HTTP Dog - HTTP status code API with dog images for error pages.
• Music for Programming - Curated ambient mixes for focused work.
• Pomofocus - Pomodoro timer for desktop and mobile browsers.
• Prioritize - Drag-and-drop task prioritization boards for product managers.

Components UI

• Aceternity UI - Trending Tailwind CSS components with animations, ready to copy and paste.
• Magic UI - 50+ animated React components built with Tailwind CSS and Framer Motion.
• Uiverse - Community-built UI elements copyable as HTML/CSS, Tailwind, React, or Figma.

AI

• DeepSeek Chat - AI chat assistant for coding and general questions.
• Hotpot.ai - AI image editor, generator, and writing tools.
• igly.ai - AI image editor for background removal, inpainting, upscaling, and generative fill.
• Image Translate AI - Translate text in images across 200+ languages while preserving layout.
• powerfulwebsites.online - A curated directory of highly useful, viral, and hidden tools across the internet with Quiz and AI-assistant.
• Rix - AI chatbot for debugging programming issues (beta).
• Seona AI - AI-powered SEO assistant with weekly optimization suggestions.
• WebCoreLab - SEO and Core Web Vitals audit tool with AI-powered GEO/AEO visibility tracking.

---

The list will grow over time! Have fun using it! ❤️✌️