All Free Developer Tools, Generators & Playgrounds

Check foreground/background color contrast ratio against WCAG 2.1 AA and AAA. Live preview for text, large text, and UI components. Suggested fix when you fail.

Media Queries Generator

CSS · SCSS · Tailwind · JS

Generate CSS media queries with Bootstrap, Tailwind, or MUI breakpoints. Add dark mode, reduced motion, print, and retina feature queries. Export as CSS, SCSS mixins, Tailwind config, or JS strings.

CSS Shape Generator

37 shapes · 7 exports

Generate pure CSS for 37 shapes — triangles, arrows, stars, hearts, hexagons, speech bubbles and more. Customize color, size, rotation. Export as CSS, HTML, React, Tailwind, SCSS, Styled-Components, or Vue.

CSS Easing Generator

Cubic-bezier curve editor

Visual CSS cubic-bezier easing generator. Drag handles to create custom timing functions, preview live animations, copy transition/animation snippets. 27 presets including Back, Expo, Circ easings.

CSS Animation Generator

Keyframe animation builder

79 CSS keyframe animations with live preview. Visual cubic-bezier editor. Export CSS, Tailwind config, or React.

CSS Loader Generator

Animated spinners

10 pure CSS loading animations. Customize colors, size, and speed. Copy CSS and HTML instantly.

CSS Transform Generator

Translate, rotate, scale

Visual sliders for translate, rotate, scale and skew with live preview. Transform-origin picker, 3D perspective, 10 presets. Export CSS, Tailwind, or React.

CSS Filter Generator

Visual image filters

9 CSS filter functions with live side-by-side preview. Blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity + drop-shadow. 10 presets.

Box Shadow Generator

CSS shadow studio

Multi-layer CSS box shadow studio with neumorphism presets. Export CSS, Tailwind, JS, or SCSS.

Gradient Generator

CSS gradient builder

Build CSS linear, radial, and conic gradients visually. Color stop editor, presets, and CSS/Tailwind export.

Flexbox Builder

Visual layout editor

Visual CSS Flexbox layout editor. Control every flex property and export CSS, SCSS, Tailwind, or React.

CSS Grid Builder

Visual grid layout editor

Build CSS grid layouts visually — drag to create named areas, edit column/row tracks, adjust gaps. Export CSS, SCSS, Tailwind, React, or full HTML.

Color Palette Generator

Harmony-based palettes

Generate harmonious color palettes from any base color. Monochromatic, analogous, complementary, triadic, shades & more. Export CSS vars, Tailwind, Hex, HSL, SCSS.

CSS Clamp() Generator

Fluid responsive typography

Generate a full fluid type scale (xs–4xl) using CSS clamp(). Visual viewport slider, 6 scale ratios, formula explainer. Export CSS vars, Tailwind, or SCSS.

Glassmorphism Generator

Frosted glass effect builder

Build CSS glassmorphism effects visually — blur, transparency, saturation, border, shadow. 8 presets, image upload, Tailwind & React export.

Mesh Gradient Generator

SVG mesh gradient builder

Create smooth, organic mesh gradients with draggable color blobs. Export as SVG, PNG, or CSS radial-gradient code.

CSS Minifier / Beautifier

Minify & format CSS

Minify CSS to reduce file size or beautify it for readability. Shows compression stats, syntax highlighting, file upload, and history.

CSS Autoprefixer

Vendor prefixes + Browserslist

Add vendor prefixes to CSS with PostCSS Autoprefixer in your browser. Choose Browserslist presets or custom targets, reject browsers, configure grid/flexbox prefixes, remove old prefixes, and copy or download output.

Color Picker

HEX · RGB · HSL · OKLCH

Pick any color and convert instantly between HEX, RGB, HSL, HSV, OKLCH, and CMYK. Smart paste, WCAG contrast ratios, copy any format.

CSS Clip-path Generator

Visual polygon editor

Visual CSS clip-path editor with draggable handles. 18 presets — triangle, star, hexagon, arrow, chevron. Polygon, circle, ellipse & inset modes. CSS, Tailwind & React export.

SVG Wave Generator

Layered wave dividers

Generate smooth SVG wave dividers with sliders for amplitude, wave count, layers, and height. Top or bottom edge, solid or gradient fill. Export SVG, CSS background, or React.

Carousel Builder

HTML · CSS · JS · React

Build a responsive carousel visually and export clean HTML, CSS, JavaScript, or a React component. Slide & fade transitions, arrows, dots, autoplay, accent color, and more.

CSS Button Generator

Gradient, neon, glass, 3D buttons

Create beautiful CSS buttons with live preview. 16 presets including gradient, glassmorphism, neumorphism, neon glow, 3D, outlined. Export CSS, SCSS, React JSX, Tailwind.

Navbar Builder

Visual navbar designer

Build a custom navbar visually — 4 layouts with logo, links, colors, and fonts. Export HTML+CSS, React, Tailwind, or Vue 3 SFC.

SVG Animation Generator

CSS, SMIL & GSAP

Animate SVG shapes with CSS, SMIL, or GSAP. 50+ presets — rotate, bounce, draw stroke, marching ants, orbit. Download as SVG or HTML.

SVG Motion Studio

Timeline SVG animator

Animate SVG layers with timeline keyframes, bezier easing, drag-and-drop reorder, copy/paste keyframes, custom presets, and export to CSS, GSAP, ScrollTrigger, Framer Motion, or Lottie JSON. Multi-project library and GitHub Gist sync keep projects across devices.

Font Pairing Tool

Google Font combinations

Discover curated Google Font combinations with live preview. Adjust heading and body sizes with CSS export.

Responsive Preview

Test any screen size

Preview any website at 8 screen sizes from 320px mobile to 1920px wide. Zoom controls and device tabs.

CSS → Tailwind

Convert CSS to utilities

Paste CSS and get the equivalent Tailwind utility classes instantly. Handles spacing, colors, typography, flexbox, grid, borders, and more — with arbitrary value fallbacks.

Tailwind → CSS

Expand utilities to CSS

Paste Tailwind utility classes and get the equivalent CSS declarations. Supports all spacing, color, typography, flex, grid utilities — plus arbitrary values and responsive/state variants.

Toggle Switch Generator

Accessible switch UI + code export

Design accessible CSS toggle switches with live state previews. Customise size, colors, shape, and transitions. Export HTML+CSS, React, Vue 3, or Tailwind with ARIA built in.

jQuery Playground

72 lessons · live preview

Learn jQuery with 72 interactive lessons across 16 chapters — including Utilities, Deferred & Promises, and Plugin Basics. Live preview, syntax highlighting, progress tracking, console, and quick-check challenges.

Bootstrap 5 Playground

50 lessons · live preview

Learn Bootstrap 5 with 50 interactive lessons across 15 chapters — grid, forms with floating labels, modals, toasts, offcanvas, carousel, position utilities, and more. Native dark mode, auto-init JS components, live preview.

Vue.js Playground

40 lessons · Composition API · Mini-Projects

Learn Vue 3 interactively with 40 guided lessons across 13 chapters — Options API, Composition API, all six core directives, composables, slots, provide/inject, Teleport, custom directives, v-memo, async components, and 4 real mini-projects. Live preview, progress tracking, share via URL. No install.

HTML Playground

42 lessons · Click-based · Live preview

Learn HTML interactively with 42 click-based lessons across 13 chapters — tags, forms, tables, semantic HTML, responsive images, native components (dialog, SVG, ARIA), performance hints, and SEO metadata. Live split-pane preview, no typing required, no install.

JavaScript Playground

60 lessons · DOM · Async · Canvas

Learn JavaScript interactively with 60 guided lessons across 25 chapters — from variables and functions through DOM, events, async/await, fetch, closures, classes, generators, Web Workers, Canvas, performance, security, and testing. Live editor, clickable DOM preview, console panel, progress tracking. No install.

SVG Playground

44 lessons · shapes · paths · animation

Learn SVG interactively from beginner to pro with 44 guided lessons across 12 chapters — shapes, paths, viewBox, gradients, patterns, text, transforms, filters, clipping, masking, plus CSS and SMIL animation. Live editor, instant preview, transparency grid, animation replay, progress tracking. No install.

TypeScript Playground

Learn TypeScript with live lessons

Learn TypeScript interactively with 32 guided lessons across 10 chapters — basic types, inference, arrays, tuples, object types, aliases, interfaces, unions, functions, classes, generics, utility types, keyof, type guards, conditional types, mapped types, async patterns, tsconfig, migration, and best practices. No install, no setup.

Tailwind Playground

Learn Tailwind CSS with a live editor

Learn Tailwind CSS interactively with a live HTML editor and instant preview. 48 lessons across 15 chapters — utility classes, group/peer modifiers, arbitrary variants, has-* modifier, @layer, print styles, motion-safe, skeleton loading, dialog/popover patterns, Tailwind v4 changes, and accessibility. No install, no setup.

CSS Playground

Learn CSS with a live editor

Learn CSS interactively with a live editor and instant preview. 53 lessons across 18 chapters — selectors, box model, flexbox, grid, animations, variables, responsive design, container queries, subgrid, CSS nesting, @layer, logical properties, scroll-driven animations, blend modes, @property, and modern units. No install, no setup.

SCSS Playground

45 lessons · Sass modules · tokens

Learn SCSS and Sass online with 45 guided lessons, a live HTML preview, and compiled CSS output — variables, nesting, @use, @forward, mixins, functions, maps, loops, design tokens, CSS variables, responsive mixins, cascade layers, container queries, architecture, and modern Sass patterns. No install.

React Playground

Learn React with a live code editor

Learn React interactively with a live code editor and instant preview. 44 lessons across 19 chapters — JSX, hooks, state, forms, error boundaries, portals, keys, compound components, render props, Suspense, useTransition, testing, GSAP in React, and more. JSX syntax highlighting, console panel, Quick Check challenges. No install, no setup.

Angular Playground

45 lessons · Signals · RxJS · Testing

Learn Angular interactively with 45 guided lessons across 13 chapters — templates, directives, components, services, routing, standalone components, signals, reactive forms, RxJS, lazy loading, change detection, testing, and feature architecture. Live preview, no Angular CLI, no install.

Next.js Playground

App Router sandbox

Prototype Next.js App Router screens in your browser. Edit page.jsx, layout.jsx, globals.css, and a route handler with live preview, API testing, autosave, and ZIP export.

GSAP Playground

Learn GSAP animation interactively

Learn GSAP animation interactively with a live JavaScript editor and instant visual preview. 55 lessons across 18 chapters — gsap.to(), timelines, stagger, ScrollTrigger, keyframes, gsap.utils, matchMedia, reduced motion, official GSAP plugins, and real animation patterns. Replay button, progress saved locally. No install, no setup.

Tailwind Formatter

Sort & group classes

Sort, deduplicate, and group Tailwind CSS classes by category. Flat and grouped output views.

HTML Formatter

Prettify HTML, CSS & JS

Paste HTML and format it instantly with proper indentation. Prettifies inline <style> CSS and <script> JS. Line numbers + history.

JavaScript Minifier

Concatenate, uglify & compress

Minify JavaScript online in your browser. Concatenate multiple JS files, remove comments, compress whitespace, optionally uglify variable names, wrap in an IIFE, and download a .min.js file.

HTML Table Generator

Visual table builder

Build HTML tables visually. Add rows and columns, edit cells, set alignment, and export clean semantic HTML or Tailwind CSS. Free online tool.

Markdown Table Generator

Visual Markdown table builder

Generate Markdown tables visually. Add rows and columns, edit cells, set column alignment, and export as Markdown, HTML, or CSV. Free online tool.

HTML Entity Encoder

Encode / Decode · Named · Numeric · Unicode

Encode HTML special characters to named entities (&amp;, &lt;, &gt;) or numeric entities. Decode HTML entities back to plain text. Three modes: minimal, full, and numeric.

JSON Formatter

Format & validate

Format, validate, minify, and syntax-highlight JSON. Live parsing with sort keys and download support.

JSON Schema Generator

Generate JSON Schema from JSON

Paste JSON and instantly generate a JSON Schema (Draft 7). Infers types, required fields, nested objects, and arrays. Copy or download free.

JSON Table Viewer

Tabular JSON explorer

Visualize JSON arrays as tables. Filter, sort, paginate, toggle columns, and export as CSV.

JSON Dashboard Generator

Charts · filters · React export

Paste any JSON or API response — instant stat cards, bar/line/pie charts, category filters, sortable table, and a complete React dashboard with Recharts. No setup required.

API Mock Generator

Fake REST API with JSON schema

Build fake REST API endpoints with realistic mock JSON. Auto-generate fake data, export as JSON Server db.json or Postman collection. Free for frontend devs.

Diff Checker

Compare text & code

Compare two texts side-by-side with LCS-based diffing. Split, unified, and char-level inline modes.

XML Formatter / Validator

Format, validate & minify XML

Free online XML formatter, validator, and minifier. Paste XML and instantly pretty-print with syntax highlighting, validate with error line numbers, or minify to compact form.

SQL Formatter

Beautify & minify SQL

Format and beautify SQL queries with proper indentation, keyword casing, and syntax highlighting. Minify SQL, dialect support for MySQL, PostgreSQL, SQLite & SQL Server.

UUID / ULID / NanoID

v4, v7, v1, ULID, NanoID

Generate UUID v4, v7, v1, ULID, and NanoID in bulk. Uppercase, no-hyphens, custom NanoID alphabet. Up to 1000 IDs, copy all or download. 100% browser, no sign-up.

API Request Generator & Tester

Generate · Test · 12 langs

Generate HTTP request code in 12 languages and test APIs live in the browser — Fetch, Axios, XHR, Node.js, cURL, Python, PHP, Ruby, Go, C#, Jest, Pytest. GraphQL, env vars, history & Postman import.

SQL Playground

Learn SQL — 35 lessons · PostgreSQL WASM

Learn SQL through 35 structured lessons with real PostgreSQL in your browser. Challenges, query explainer, multi-tab editor, data editor, table previews, query history, and smart error hints.

MongoDB Playground

Learn MongoDB — 32 lessons · Query simulator

Learn MongoDB interactively with a live query editor and instant results. 32 lessons across 10 chapters — CRUD, query operators, array queries, update operators, aggregation pipeline, and more. No install, no server.

Express.js Playground

Learn Express — 32 lessons · API simulator

Learn Express.js interactively with a live API editor and HTTP client. 32 lessons — routing, middleware, REST APIs, error handling, authentication, and mini-projects. No Node.js install.

Firebase Playground

Firestore simulator · 23 lessons

Learn Firebase Firestore in your browser with a full in-browser simulator. Add, read, update, delete, query documents, use subcollections, real-time listeners, and special values. No Firebase account needed.

GraphQL Playground

In-browser executor · 12 lessons

Learn GraphQL in your browser with a full in-browser executor. 12 lessons covering queries, mutations, variables, fragments, directives, introspection, and unions. No server or account needed.

Node.js Playground

Visual event loop simulator

Learn Node.js visually with a client-side event loop simulator for async/await, Promises, fs examples, and API examples. Simulated output, no backend execution.

REST API Builder Playground

Mock routes · Test requests · Export Express.js

Create mock REST API routes visually, test GET/POST/PUT/DELETE requests with a built-in HTTP client, and export working Express.js code. CRUD templates, auth simulation, status codes, headers. No backend required.

Git Playground

43 lessons · Branches · GitHub workflow

Learn Git interactively with 43 guided lessons and a browser-safe terminal simulator — init, status, add, commit, log, branches, merge conflicts, remotes, GitHub workflow, undo, reset, revert, rebase, cherry-pick, hooks, submodules, LFS, signed commits, and CI/CD. No install.

Python Playground

18 lessons · visual code tracer

Learn Python with 18 guided lessons across 8 chapters — variables, strings, numbers, booleans, while loops, list comprehensions, tuples, sets, dictionaries, functions, lambda, scope, classes, try/except, and JSON. Step-by-step visual tracer shows memory diffs, call stack, and output on every line.

PHP Playground

60 lessons · Forms · OOP · MySQL

Learn PHP online with 60 guided lessons and a browser-safe simulator — syntax, variables, forms, validation, arrays, OOP, JSON APIs, PDO/MySQL, Composer, PHPUnit, Laravel basics, deployment, and security. No install.

Redis Playground

8 lessons · TTL · Cache · Pub/Sub

Learn Redis with 8 guided lessons — key-value, TTL expiration, caching patterns, data types (List, Set, Hash, Sorted Set), atomic counters (INCR/INCRBY), distributed locks (SETNX), key inspection (KEYS, TYPE, MGET), and Pub/Sub. Visual key-space table, TTL countdown, command history, guided challenges. No server required.

REM ↔ PX Converter

Base font size calculator

Bidirectional REM and PX conversion with custom base font size. Live preview and reference table.

HTML → JSX Converter

Convert HTML to React

Convert HTML to React JSX. Handles className, htmlFor, camelCase events, self-closing tags, and inline styles.

JSON → TypeScript

Interface & type generator

Paste JSON and get TypeScript interfaces or type aliases instantly. Handles nested objects, arrays of objects, optional fields, null safety, export keyword, and custom root names.

Image to SVG

Vectorize PNG, JPG & WebP

Convert raster images to scalable SVG vector graphics in your browser. Color, grayscale, and B&W tracing modes with smoothing and detail controls. Download or copy SVG instantly.

SVG to PNG Converter

Custom size, scale & background

Convert SVG to PNG instantly. Upload file or paste SVG code. Set scale (1×–4×), custom dimensions, transparent or custom background. Download PNG free.

HTML to Markdown

Web pages & CMS exports

Convert HTML to clean Markdown instantly. Paste from web pages, CMS exports, or email templates. Full support for tables, code blocks, links, images, and lists. Copy or download .md.

Markdown to HTML

MD → HTML with live preview

Convert Markdown to HTML instantly with live preview. Supports GFM tables, task lists, fenced code blocks. Copy HTML fragment or full page, download as .html file.

Image to Base64

Encode images to Data URI

Convert PNG, JPEG, WebP, GIF, SVG, or BMP to Base64. Get Data URI, HTML img, CSS background-image, raw Base64, or SVG URL-encoded output. Format conversion with quality control.

Animated SVG Icons

Pure SVG icon library

105+ animated SVG icons — checkmarks, arrows, loaders, hearts, bells, and more. Customize color, stroke, speed. Export SVG, JSX, or HTML.

Aspect Ratio Calculator

Width · Height · Social Media Sizes

Calculate aspect ratios, scale dimensions proportionally, and look up exact pixel sizes for 14 social media platforms including YouTube, Instagram, TikTok, Twitter/X, LinkedIn, Facebook, Pinterest, and OG images.

Code Screenshot

Beautiful code images

Turn any code snippet into a stunning PNG. 9 themes, 22 languages, macOS/Windows/Terminal frames, gradient backgrounds. Download at 1×/2×/3× scale.

Image Color Palette Extractor

Extract colors from any image

Upload an image and extract the dominant color palette as HEX, RGB, and HSL values. Copy any color instantly. Browser-only, no upload to server.

Markdown Editor

Live preview & GFM export

Write Markdown with a real-time GitHub Flavored Markdown preview. Toolbar shortcuts, localStorage auto-save, export as .md or standalone .html. 100% browser, no sign-up.

Lorem Ipsum Generator

Placeholder text, HTML-ready

Generate lorem ipsum placeholder text as paragraphs, sentences, or words. Control length, wrap in HTML <p> tags, and copy instantly. Classic opening phrase option.

AI Prompt Studio

Score, fix & optimize prompts

Score your AI prompts across 8 quality dimensions, detect anti-patterns, optimize for ChatGPT, Claude & Gemini, use 23 expert templates, and save a personal prompt library. No API key needed.