Develop responsive web apps 5x faster!
A must-have DevTool for all Front-End developers that will make your job easier.

Responsively

The easiest way to create a README file in minutes visually


ReadMe

High-class illustrations for web and mobile projects. Make your project eye-catching with awesome characters. Use it both for commercial and personal purposes.

STORYTALE

Make an awesome profile picture from any photo

Profile Pic Maker

Remove backgrounds 100% automatically in 5 seconds with zero clicks.

removebg

REMOVE.BG

Handy developer tools with a delightful interface. Provide 20+ tools that help developers with commonly performed tasks like Encoding/Decoding, Minifying, Test Dummy data set, and a lot more.

Small Dev Tools

Create stunning
product mockups easily and online


SMARTMOCKUPS 

Reveal your hidden pipeline
With the Weekly Visitor Report, you get a weekly dashboard of de-anonymized companies visiting your website — for free.

Weekly Visitor Report

Capture and share Twitter posts as beautiful images. You could use this as social proof on your website.

Poet.so

Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.

Dribbble

O-DAN is a cross-search service for high-quality free stock photo sites.

O-DAN

An online playground to convert CSS to TailwindCSS

CSS to TailwindCSS

Broider is a fun tool for designing border decorations!

broider

Broider

Neumorphism/Soft UI CSS shadow generator
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

Neumorphism.io

Smooth Shadow

Create mobile or browser mockups from screenshots in seconds. Screenshot.rocks turns ordinary browser screenshots into beautiful mockups

Screenshot.rocks

A pure CSS library that provides you with a variety of nice-looking toggles.

MoreToggles.css

Tailblocks

A new way to manage digital colors. Leave abstract color models behind and focus on the important things.

calcolor

CSS scroll shadows

A collection of popular layouts and patterns made with CSS

CSS Layout

700+ CSS Icons

Stunning library of over 1 million stock images and videos.
Royalty free and safe for commercial use, with no attribution required

PIKWIZARD

A collection of customizable CSS section separators, with the possibility to easily copy the code.

CSS Section Separator Generator

A collective list of more than 1000 Free Public and Open REST APIs for developers like movie APIs, Anime APIs, weather APIs, music APIs, games and comics APIs, currency APIs, sports APIs, science APIs, open data APIs, etc.

Public APIs

Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selected color. Html element samples are also shown below the color detail page. Simply type the 6 digit color code in the box above and hit enter.co

color-hex

Create and share color palettes for your UI, and measure the accessibility of any color combination.

COLOR TOOL

This generator is intended to get you going, it doesn't provide every value but the code output should give you a nice jumping off point :)

The Hero Generator

Generated css for animated gradient background.

Animated Gradient Background Generator

CSS Grid Generator

Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.

Glass UI

Generative design tools for the web
Customize, curate, and publish designs faster than ever.

Components AI

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

colormind

Colormind

Font Generator generates font 𝕋𝕙𝕚𝕤 𝕄𝕖𝕥𝕒 𝕋𝕒𝕘𝕤 𝔽𝕠𝕟𝕥 𝔾𝕖𝕟𝕖𝕣𝕒𝕥𝕠𝕣 𝕚𝕤 ♡

Font Generator

Create and share beautiful images of your source code.
Start typing or drop a file into the text area to get started.


carbon

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

Meta Tags

Create useful .gitignore files for your project

gitignore.io

Test any website. Nibbler offers a nice report to improve a website which is including accessibility, experience, marketing and technology.

Nibbler

Discover common web application vulnerabilities and server configuration issues
This is Light Scan.

Website Vulnerability Scanner

cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

cssreference.io

Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!

FLEXBOX FROGGY

Welcome to Grid Garden, where you write CSS code to grow your carrot garden!

GRID GARDEN

Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors.


squoosh

Websu helps you optimize your web applications for speed by generating detailed reports.

Websu

The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis.

favicon.io

Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects.

Happy Hues

Placeholder.com is a free image placeholder service for web designers, serving billions and billions of images each year.


Placeholder.com

Layoutit!

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.


CSS clip-path maker

CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites.


CSS Gradient

Type Scale allows us to try different scales.

TypeScale

Type Scale

Free fake API for testing and prototyping.

JSONPlaceholder

{JSON} Placeholder

The super fast color schemes generator!
Create the perfect palette or get inspired by thousands of beautiful color schemes.

coolors

Measure your website performance.
Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.

WebpageTest

Excellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is saved as 24-bit PNG directly from Adobe Photoshop. On the right is the same image processed by TinyPNG.

tinypng

tiny png

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.

regex101

regular expressions 101

Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. 

CanIUse

Generate Base64 code for CSS background image from a pattern.

PATTERNIFY

A collection of cheatsheets for developers.
Covers FE, BE and others.

Devhints

An interactive list of Bootstrap 5 classes, variables, and mixins. 🎁 The only Bootstrap 5 CheatSheet you will ever need. 🎊


Bootstrap5CheatSheet

Bootstrap 5 CheatSheet 🚀

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

GetWaves

Get Waves

The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

unDraw

Stunning free images & royalty free stock
Over 2.3 million+ high quality stock images, videos and music shared by our talented community.

pixabay

Find free illustrations & vectors for your next personal or commercial project with & without attribution ✓ SVG ✓ PNG ✓ PSD ✓ SKETCH ✓ AI ✓ FIGMA

free illustrations

Coverr video is a completely free stock footage website that allows you to download and use high-quality stock videos anywhere. And there is no catch! No sign-up needed, no attribution required or hidden tricks anywhere, when we say free, we mean it. Of course you can, please do!

coverr

COVERR

Mazwai was built with one simple aim: to provide free, high quality, cinematic style stock footage, that can be used in a wide-range of creative projects. All of our royalty-free video clips have been hand-picked by our team of video experts, brining you an unrivaled selection of quality visual content with simple, and most importantly, safe licensing.

Mazwai

Mazwai.com

The best free stock photos & videos shared by talented creators.

pexels

PEXELS

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Unsplash

Pure CSS Code, JPG Download, Open Source! Red Leaks 182 Carefully Crafted Gradientas Gradients are fun to do, but i always tried to make it visually appealing. Every gradient has been made with a care from the heart!

gradienta

Gradienta

Get access to the useful styles with our Chrome extension. Our mission is to let Designers focus on design, and spend as little time as possible digging in a code.

csspeeper

CSS Peeper

Scroll to learn about accessible button contrast Or skip to the generator to begin creating button styles with accessible contrast The Web Content Accessibility Guidelines (WCAG) determine accessible contrast and provide a ratio system to be able to check contrast consistently and programmatically.

ButtonBuddy

Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle.

bundlephobia

BUNDLEPHOBIA

Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner.

npm trends

New to semantic versioning? Learn the basics. use the caret (aka hat) symbol, ^ caret behavior is different for 0.x versions, for which it will only match patch versions. include everything greater than a particular version in the same minor range specify a range of stable versions use the pre-release tag pre-release versions are specified as exact versions.

npm semver calculator

JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS).

jwt io

JWT.IO

JSLint, The JavaScript Code Quality Tool. This file allows JSLint to be run from a web browser. It can accept a source program and analyze it without sending it over the network.

jslint

JSLint

prettier.io/playground allows developers to try options on the website without creating any projects.

prettier

Prettier Playground

openbase is a very useful website when you are looking for npm packages for your project since we can see other developers' reviews about the packages.

openbase

fontello

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

GoogleFonts

Google Fonts

Make your web pages fast on all devices
PageSpeed Insights gives advice to improve your website's performance.

PageSpeedInsights

PageSpeed Insights

@types search

This can be useful when you work on xxx.min.js and need to check the code for debugging.


unminify (js/css/html/xml/json)

Actually, there are some CLI tools and functionalities to minify js, but this can be useful when you don't use any module bundlers and task runners. It's easy to use since we just need to copy and paste js code.

JavaScript Minifier

TypeScript Playground is useful to check the latest version's typescript's features.

TypeScript Playground

config.js generator for webpack, Parcel, and Snowpack
Create App supports react, svelte, and vue.

Create App

Bit is a scalable and collaborative way to build and reuse components. It's everything you need from local development to cross-project integrations.

Frontend Tools

Spread Joy & Usefulness

currently87 sites