Animation

    • animate.css

      A cross-browser library of CSS animations. As easy to use as an easy thing.

    • Animista

      Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

    • BeatFlyer

      A web tool that lets you create very quickly loopy and catchy animations from your multi-layer compositions.

    • Flare

      A powerful design and animation tool, which allows designers and developers to create animations for their app or game.

    • GSAP

      A suite of tools for scripted, high-performance HTML5 animations in all major browsers.

    • Keyframes.app

      An insanely simple way to create CSS animations with a visual timeline.

    • LightBox

      2D, Hand-Drawn animation package.

    • Lottie

      A mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web.

    • Mantra

      A web-based timeline animation tool.

    • Stylie

      A web-based graphical CSS3 animation tool.

    background patterns

    • svg backgrounds

      SVG Backgrounds hosts a collection of customizable SVG-based repeating patterns and backgrounds for websites and blogs.

      svg

    • BGJar

      Free svg background generator for your websites, blogs and app.

      svg

    • tartanify

      A ready-to use collection of tartan patterns. All available for download as seamless repetitive tiles in svg and png format.

      svg

    • trianglify

      Trianglify.io is a tool for generating low poly triangle patterns that can be used as wallpapers and website assets.

      svg triangle

    chart

    • nivo

      nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries.

      Reactjs

    • SVG Charting Libraries

      There is no shortage of options with charting libraries on the web. That's good! Competition is good for consumers. It keeps the quality high. That's certainly true here. The landscape of charting libraries is pretty impressive, ranging from the good-and-free to the excellent-and-paid.

      svg canvas

    cheat sheet

    code demo

    • glorious.codes

      The easiest way of creating animations to show your code in action.

    • carbon

      Create and share beautiful images of your source code.

    Color

    • BrandColors

      The biggest collection of official brand color codes around.

    • Color

      Create color schemes with the color wheel or browse thousands of color combinations from the Color community. Made by Adobe.

    • Color by Cloudflare

      A tool to preview palettes against UI elements, cycle through accessible color combos and reate palettes manually, via URL import, or generatively.

    • Color Leap

      Take a leap through time and see the colors of history.

    • Colormind

      Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.

    • Colorwise

      Search through the color palettes of the most voted products on Product Hunt.

    • Colour Cafe

      Colours inspiration that have selected modern colour palette in Instagram.

    • Geenes

      A tool to create harmonious color themes with code and sketch file export.

    • Paletton

      A designer tool for creating color combinations that work together well.

    • Picular

      A rocket fast primary color generator using Google's image search.

    • vaunt.io

      Vaunt is an app that extracts dominant colors from any image!

    debugging

    Design Inspiration

    • Behance

      An online platform to showcase & discover creative work.

    • CodeMyUI

      Handpicked collection of web design & UI inspiration with code snippets.

    • Collect UI

      A platform for your daily inspiration collected from daily ui & beyond. Based on Dribbble shots, 14419 hand picked designs.

    • Creative Portfolios

      A curation of the most creative portfolios made by designers & developers.

    • Dribbble

      An online community for showcasing user-made artwork. Great resource to get inspired from others work.

    • Inspiration UI

      Community that aims to provide the best design resources for those who create for the web.

    • Httpster

      An inspiration resource showcasing totally rocking websites made by people from all over the world.

    • H69.Design

      Landing page colletions & Free resources for designers.

    • Lapa Ninja

      Landing page design inspiration from around the web. 1800+ landing page examples and updated daily.

    • Mobbin

      Browse mobile design patterns for popular apps. Explore common user flows such as onboarding, account sign up and log in, core functionality, and more.

    • One Page Love

      A collection of beautiful unique One Page websites for website design inspiration.

    • Owwly

      Home for digital products crafted with passion to design.

    • pttrns

      Design patterns for popular mobile apps.

    • ReallyGoodUX

      Screenshots and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs.

    • UI Garage

      The one stop shop for designers, developers and marketer to find inspiration, tools and the best resources.

    • UI Recipes

      Weekly 15 min lessons on UI design from the hottest apps.

    • UX Archive

      Browse more than 400 user flows across 120 mobile apps. Examine tasks such as booking, logging in, onboarding, purchasing, seaching, and more.

    • Waveguide

      A design knowledge bank with thousands of artificially enriched examples of product and brand experience (examples of Mobile App, Landing pages, eCommerce, CX/UX Patterns).

    • Web Design Museum

      Over 1,200 carefully selected web sites that show web design trends between the years 1994 and 2006.

    editor

    • The ORY Editor

      The ORY Editor was written because we urgently needed a robust and modern content editing solution for our open education platform serlo.org

      text WYSIWYG

    • StackBlitz

      Code the Future. In Your Browser. Create, edit & deploy fullstack apps — in just one click.

      editor code

    • trix

      Compose beautifully formatted text in your web application. Trix is an editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

      text WYSIWYG

    emoji

    Flexbox

    font

    • BeFonts

      A Decent collection of free fonts.

    • DaFont

      Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.

    • Emotype

      Makes it easy to find fonts based on the emotions you want to convey on your website.

    • Fonts

      Thousands of beautiful fonts by Adobe.

    • Fonts Arena

      Curated typography website with high quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more.

    • FontSpark

      A simple tool to help designers quickly find the best fonts for their projects.

    • Google Fonts

      Making the web more beautiful, fast, and open through great typography.

    • Wakamai Fondue

      The tool that answers the question "what can my font do?".

    • Font style matcher

      If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.

    forms

    • Boilerform

      Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

    frameworks & libraries

    free templates

    • GetTemplate

      Free and premium Bootstrap templates for rapid web development

    • w3layouts

      Download Free Responsive HTML5 CSS3 Website Templates provided by w3layouts it's free to download and start website.

    • templated

      A collection of 867 simple CSS, HTML5 & Responsive site templates, built by us and released for free under the Creative Commons.

    • HTML5 UP

      Responsive HTML5 and CSS3 site templates designed by @ajlkn.

    • htmltemplates.co

      Free HTML Website templates and HTML UI Kits to kickstart your next project.

    • freshdesignweb

      68+ best free responsive html5 css3 website templates.

    git

    Gradient

    • Blend

      Create and customize beautiful CSS3 gradients.

    • Colorffy

      Get css, images, ui previews or create your own gradients.

    • ColorSpace

      The perfect matching color scheme for your next project! Generate nice color palettes.

    • Cool Backgrounds

      Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.

    • CoolHue

      Handpicked gradient palette and swatch for your next super amazing stuff.

    • CSS Gradient

      A free css gradient generator tool, this website lets you create a colorful gradient background.

    • Egg Gradients

      A color collection page which includes shades of 12 different colors.

    • Grabient

      Beautiful and simple UI for generating web gradients.

    • Gradient Backgrounds

      Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites.

    • Gradient Hunt

      A free and open platform for colour inspiration with thousands of trendy hand-made colour gradients.

    • Gradients Guru

      Blend mode background images & beautiful background gradients for your UI.

    • Hypercolor

      A curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette.

    • Web Gradients

      A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.

    Grid

    • CSS Gridish

      CSS Gridish takes design specs of your product’s grid and builds out all the resources needed for your team.

    • Infinite Grid

      A module used to arrange card elements including content infinitely according to layout type.

    • griddy

      Learn the CSS Grid Spec

    • CSS grid cheat sheet

      Learn all about the properties available in CSS Grid Layout through simple visual examples.

    • Magic Grid

      A simple, lightweight Javascript library for dynamic grid layouts.

    HTML

    Icons

    • SVG Repo

      Explore, search and find the best fitting icons or vectors for your projects using wide variety vector library.

    • Feather Icons

      Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

    • Flaticon

      1593000+ vector icons in SVG, PSD, PNG, EPS format or as icon font.

    • Font Awesome

      The web's most popular icon set and toolkit, also it's open source.

    • Fontello

      Tool to build custom fonts with icons, also open source.

    • fontisto

      fontisto the iconic font and css toolkit · 616+ free icons

    • Iconfinder

      A marketplace for vector icons (SVG). Icon sets available in IconJar format.

    • Iconmonstr

      Discover 4412+ free icons in 305 collections.Big and continuously growing source of simple icons.

    • Icon Store

      A library of free vector icons for personal and commercial projects, designed by first-class designers.

    • Icons8

      Free iOS, Android and Windows styled icons.

    • Ikonate

      Customise, adjust and download free vector icons.

    • illustrio

      A smarter icon library. Build something great with 100% customizable icons.

    • Ionicons

      Beautifully crafted open source icons.

    • Orion Icons

      SVG vector icons with an advanced interactive web app.

    • Streamline Emoji

      A free collection of 850 + vector emoji. The style is inspired by the japanese “Kawaii” (cute) style.

    • SVG Colorizer

      A tool to automatically change the entire color palette of any given svg icon pack intelligently keeping the shades, highlights & shadows.

    • Tilda Icons

      Download free icons for landing pages. More than 700 vector icons, collected in 43 sets for business.

    • Unicons

      1000+ pixel-perfect vector icons and Iconfont for your next project.

    • VisualPharm

      Free SVG Icons with super-fast search and free Coke. Built for fun by Icons8.

    • Xicons

      Free vector icons, that update every 10 days.

    Illustrations

    • IRA Design

      Create amazing illustrations, using hand-drawn sketch components, a cool selection of 5 gradients and ai., svg. or png. formats.

    • LukaszAdam

      free vector art illustrations and icons. They are available for personal and commercial use.

    • ManyPixels

      Royalty-free illustrations to power up your projects.

    • unDraw

      Collection of beautiful SVG images.

    • Wannapik

      Collection of free illustrations, vector images, photos, and animations for any use.

    image

    • Chromata

      Turn any image into a unique, animated work of art.

    • image resizer

      Instantly resize‌, edit and crop your photos & images online for all web and social media formats with the click of a button. It's free and easy to use!

      image-resize

    • photopea

      Open and edit PSD, XCF, Sketch (Photoshop, Gimp and Sketch) or any other image files. Inspect PSD and Sketch files. Convert Sketch to PSD. Apply photo effects and filters. A perfect alternative to Photoshop or Gimp.

      photoshop sketch

    • snappa

      Whip up graphics for social media, ads, blogs, and more - even if you're not a graphic designer.

    • pixlr

      Discover free and premium online photo editor! Effects, filters, overlays, simple to expert tools. You'll find a Pixlr image editor just for you!

    • crello

      he simplest online image editor. Create your own designs — posts, covers, graphics, and posters using the best software on the web. It's easy!

    • fotor

      Fotor is a free online picture editor and graphic designer, allowing you to use online photo editing tools, such as add filters, frames, text, stickers and effects…and apply design tools to make creative photo designs and graphics. Online photoshop and graphic design software has never been so easy!

    • canva

      00Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.00

    javascript

    layout

    machine learning

    mockup

    • dimmy.club

      Device mockup generator for your screenshots

    • threed.io

      generate 3d mockups right in your browser upload your design, adjust settings and download your individual mockup.

    Pixel Art

    • Draw!

      Open source and free web-based pixel art and GIF editor.

    • Goya

      A pixel-art editor built on ClojureScript and Om.

    • Make 8 bit art

      An open source and in-browser pixel art drawing tool.

    • Piskel

      Online editor for animated sprites & pixel art.

    • Poxi

      A flat pixel art editor.

    Placeholder

    regex

    • html5pattern

      HTML5Pattern is a source of regularly used Input-Patterns.

    • i Hate Regex

      i Hate Regex is a regex cheat sheet that also explains the commonly used expressions so that you understand it. Stop hating and start learning.

    • RegexOne

      RegexOne provides a set of interactive lessons and exercises to help you learn regular expressions

    responsive image

    sass

    Screenshot Software

    • LICEcap

      LICEcap can capture an area of your desktop and save it directly to .GIF

    • Kap

      Open source screen recorder with options to export to GIF, MP4, WebM and APNG.

    • OBS

      Open source software for video recording and live streaming.

    • ScreenToGif

      Record a gif of part of the screen. Only available for Windows.

    shadow

    • mixfont

      Whether you're designing a website or writing a paper, Mixfont is simple way to choose beautiful fonts that work well together.

      text-shadow font

    Shape

    SEO

    • SEO audit tools

      Essential technical SEO audit tools for in-depth website analysis.

    Sound Design

    • Bensound

      Download creative commons music, royalty free music for free and use it in your project.

    • Freesound

      A collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds.

    • Fugue Music

      Download free background music for your videos.

    • UI Sounds

      Learn sound design for user interfaces by example.

    • Wistia Music

      Download some free background tracks to add energy and emotion to your videos.

    • WOWA

      Download royalty free music for YouTube videos, Podcasts and Apps. No copyright CC0. Music inspired by Unsplash.

    Stock Photos

    • Burst

      Free stock photos for websites and commercial use.

    • Duotone

      Free duotone images to use in any project, or make custom duotone images.

    • FoodiesFeed

      Thousands of beautiful realistic free food pictures in high resolution.

    • Freestocks.org

      High quality photos all released under Creative Commons CC0.

    • Jay Mantri

      7 new photos released every Thursday under the Creative Commons CC0.

    • Kaboom Pics

      Stock photos including abstract, city/architecture, fashion, food & landscapes.

    • LandingStock

      A collection of free images for your landing page.

    • Life of Pix

      Free high-resolution photos, created by the LEEROY team.

    • Magdeleine

      Free high-quality stock photos for your inspiration.

    • Moose

      Don't search for stock photos, create them.

    • MMT STock

      High resolution photos provided by Jeffrey Betts with Creative Commons CC0.

    • New Old Stock

      A vintage photos from the public archives free of known copyright restrictions.

    • Pexels

      An aggregate of many free stock photo resources.

    • Photo Creator

      A free tool for creating realistic stock photos on your demand.

    • Picography

      Free stock photos by Dave Meier and various other photographers with Creative Commons CC0.

    • Pixabay

      Sharing photos, illustrations, vector graphics, and film footage under a proprietary license.

    • Picjumbo

      A collection of totally free photos for your commercial & personal works.

    • Pngtree

      Millions of PNG images, backgrounds and vectors for free download.

    • Reshot

      A massive library of handpicked free stock photos you won’t find elsewhere.

    • SkitterPhoto

      A wide variety of stock photos and are released under Creative Commons CC0.

    • StockSnap.io

      A large selection of free stock photos and high resolution images.

    • StyledStock

      Free feminine stock photography for every woman entrepreneur.

    • UI Faces

      Aggregator that indexes various free avatar sources that you can use in your design mockups.

    Stock Videos

    • Coverr

      Beautiful, free stock video footage for your homepage.

    • Life of Vids

      Provides free stock videos, clips, and loops.

    • Mixkit

      Extraordinary Free HD videos. For you to use, completely free of charge.

    • Motion Places

      A curated collection of beautiful footage you can use for your projects.

    • Pixabay

      It has more than 1.5 million royalty-free stock videos and photos shared by their community of creators.

    • Pexels Videos

      Makes it easy to find free stock footage for your website, promo video or anything else.

    • Videezy

      Download millions of free and premium stock footage and motion graphics instantly.

    • Videvo

      Videvo offers a large selection of HD video clips, motion graphics and free stock footage.

    SVG

    team collaboration

    • togetherjs

      Add real time collaboration features to your website today!

    • witeboard

      Witeboard is the fastest way to collaborate real-time with your team anywhere.

    transforms

    • enjoycss

      EnjoyCSS is an advanced CSS3 generator that saves your time. Its handy and simple UI allows you to adjust rich graphical styles quickly and without coding.

    typography

    • Gutenberg

      Gutenberg is a work-in-progress project by Matej Latin that brings meaning and craftsmanship to web typography.

    • Measure

      Measure typographic line lengths with this browser extension for Chrome.

    • Size Calculator

      Calculate perceived size using viewing distance and physical size of the printed typography.

    Performance Optimization

    units

    visual filters

    vscode

    web audio

    • soundtocalm

      Nice place to slow down and relax. Sounds to calm down.

    • github.audio

      Listen to music generated by events happening across GitHub

    WebGL

    • pixijs

      the html5 creation engine, create beautiful digital content with the fastest, most flexible 2d webgl renderer.

    website linting

    • webhint

      webhint is a linting tool that will help you with your site's accessibility, speed, security and more, by checking your code for best practices and common errors.

      lint optimization