ToolBox Now Has 112+ Free Tools Across 7 Categories

# ToolBox Now Has 112+ Free Tools Across 7 Categories

When we launched ToolBox, we had 30 tools. Today we are at 112+ and counting. In our biggest update yet, we added 44 new tools spanning every category - design, web, image processing, developer utilities, and text generation.

This post is a complete tour of every new tool, with practical examples and use cases for each one. Whether you are a frontend developer, a backend engineer, a designer, or someone who just needs to convert data quickly, there is something new here for you.

---

Why 112 Tools?

Before diving into the new tools, it is worth explaining the philosophy behind building a broad toolbox rather than a single focused utility.

The developer tooling landscape is fragmented. When you need to check an SSL certificate, you open one website. When you need to format JSON, you open another. When you need to generate a color palette, you open a third. By the time you have ten tools bookmarked, your browser is full of third-party sites with varying privacy policies, ads, and paywalls.

ToolBox's answer is consolidation. Every tool runs entirely in your browser. No data leaves your machine. No accounts are required. No usage limits. You get one fast, consistent interface for everything.

The 44 new tools added in this release fill the remaining gaps across design, web utilities, image processing, security, and text generation. Here is what is new.

---

Design Tools (16 New)

The design category saw the most growth in this release. We built visual generators that produce production-ready CSS without requiring you to know the exact syntax.

CSS Animation Generator

Building CSS keyframe animations by hand is tedious. You need to remember the @keyframes syntax, get the timing function names right, and mentally visualize what the animation will look like before you can see it.

The CSS Animation Generator gives you a visual timeline interface. You define keyframes by setting CSS property values at specific percentages (0%, 50%, 100%, etc.), choose your timing function, duration, and delay, and see a live preview of the animation on a sample element.

The output is clean, copy-ready CSS:

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fadeSlideIn 0.4s ease-out forwards;
}

Use cases:

• Loading spinners and progress indicators
• Page transition effects
• Hover state animations
• Notification slide-ins

Neumorphism Generator

Neumorphism (soft UI) creates depth using light and shadow without gradients or borders. The effect relies on two box shadows - one light, one dark - applied to elements that share the same color as the background.

The Neumorphism Generator lets you dial in the exact look with sliders for:

• Background color - the base color for both the element and its container
• Shadow distance - how far the shadows extend from the element
• Shadow blur - how soft or sharp the shadow edges are
• Intensity - the contrast between light and dark shadows
• Shape - flat, pressed, convex, concave

Generated CSS output:

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
}

/* Pressed state */
.neumorphic-card:active {
  box-shadow:
    inset 6px 6px 12px #b8bec7,
    inset -6px -6px 12px #ffffff;
}

The generator also shows you the pressed state CSS separately, which is essential for interactive neumorphic buttons.

Glassmorphism Generator

Glassmorphism creates a frosted-glass effect using backdrop-filter: blur() combined with semi-transparent backgrounds and subtle borders. It is popular for cards, modals, and navigation overlays on top of rich imagery or gradient backgrounds.

The Glassmorphism Generator gives you live preview controls for:

• Blur intensity - the backdrop-filter blur value in pixels
• Transparency - the alpha value of the background color
• Border opacity - the whiteness of the glass border
• Background color - tint the glass with any hue
• Border radius - control corner rounding

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

The generator includes a browser compatibility note about Safari requiring the -webkit- prefix for backdrop-filter, and includes both variants in the output by default.

Typography Scale Generator

Consistent type scales are the foundation of readable, professional-looking UIs. But generating harmonious font sizes manually - deciding that your body text should be 16px, your h3 should be 20px, your h2 should be 25px, and your h1 should be 31px - requires knowledge of modular scale ratios.

The Typography Scale Generator lets you set a base font size and a scale ratio (common ratios include 1.125 for Minor Second, 1.25 for Major Third, 1.333 for Perfect Fourth, and 1.618 for the Golden Ratio), and generates the full scale as CSS custom properties:

:root {
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
}

This output drops directly into your design tokens or CSS variables file.

SVG Path Editor

SVG paths use a compact but opaque syntax. A path like M 100 200 C 100 100 400 100 400 200 defines a cubic Bezier curve, but you cannot visualize it without rendering it.

The SVG Path Editor renders your path on a canvas with draggable control points. You can:

• Drag anchor points to move segments
• Drag control points to adjust curve handles
• Add and remove path commands
• Switch between absolute and relative coordinates
• Copy the optimized path string

This is particularly useful when working with custom icons, logo shapes, or data visualization paths that need fine-tuning.

Border Radius Generator

The Border Radius Generator goes beyond simple corner rounding. CSS border-radius supports up to eight values (top-left-x, top-left-y, top-right-x, top-right-y, bottom-right-x, bottom-right-y, bottom-left-x, bottom-left-y), enabling asymmetric, organic shapes.

The generator has eight sliders - one per corner value - with a live preview of the resulting shape. A "Random Shape" button generates interesting organic blob shapes, which are popular as background accent elements in modern design.

/* Standard rounded card */
border-radius: 8px;

/* Pill button */
border-radius: 9999px;

/* Organic blob */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Font Pairing Suggester

Finding font combinations that work well together is a design skill that takes years to develop. The Font Pair Generator automates this with a curated set of high-quality pairings, each with a live preview showing how the heading and body fonts look together in context.

You can filter pairings by:

• Style - serif/sans-serif, display/body, geometric/humanist
• Mood - professional, friendly, editorial, technical
• Source - Google Fonts only (for free, self-hostable options)

Each pairing shows the Google Fonts import snippet and the CSS font-family declarations:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3&display=swap" rel="stylesheet">

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

body {
  font-family: 'Source Sans 3', sans-serif;
}

---

Web Tools (11 New)

Web developers and DevOps engineers need to inspect, audit, and debug HTTP infrastructure. The new web tools cover DNS, SSL, HTTP headers, redirects, and performance.

DNS Lookup

The DNS Lookup tool lets you query any domain's DNS records without opening a terminal. Enter a domain and select which record types to fetch:

This is useful when verifying that a DNS change has propagated, checking that a new domain's MX records point to the right mail server, or investigating why email delivery is failing.

All lookups are performed using Cloudflare's DNS over HTTPS API (cloudflare-dns.com/dns-query). This means your queries are encrypted and do not expose your IP address to the DNS resolver in cleartext - consistent with ToolBox's privacy-first approach.

SSL Certificate Checker

The SSL Certificate Checker fetches and displays the full details of any domain's TLS certificate:

• Common Name and Subject Alternative Names - which domains the certificate covers
• Issuer - which Certificate Authority signed the certificate
• Validity period - exact not-before and not-after dates
• Days until expiration - with color coding for urgent/warning/healthy states
• Certificate chain - intermediate and root certificates
• Signature algorithm - RSA vs ECDSA, key size

Practical use cases:

• Check whether a certificate is about to expire before it causes an outage
• Verify that a new certificate covers all required subdomains (www, api, cdn)
• Confirm that an HTTPS deployment is serving the expected certificate
• Audit a third-party service's certificate before integrating with it

Website Speed Test

The Website Speed Test integrates with Google PageSpeed Insights API to give you a complete performance report for any URL. The report includes:

• Performance score - Lighthouse score from 0-100
• Core Web Vitals - LCP, FID, CLS measured from real user data
• Lab data - FCP, Speed Index, LCP, TTI, TBT, CLS from Lighthouse
• Opportunities - specific recommendations with estimated savings
• Diagnostics - additional performance data
• Passed audits - a full list of what is already optimized

The tool tests both mobile and desktop configurations. This is important because Google uses mobile-first indexing, meaning your mobile performance directly affects search rankings.

Understanding the metrics:

HTTP Request Builder

The HTTP Request Builder is a browser-based API testing tool. You can:

• Choose the HTTP method (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS)
• Enter any URL
• Add custom headers (Authorization, Content-Type, Accept, etc.)
• Write a request body in JSON, form-data, or plain text
• Send the request and inspect the full response (status code, headers, body)

This is useful for:

• Testing REST APIs without installing Postman or Insomnia
• Verifying that an API endpoint is accessible from a public network
• Checking CORS headers on an API response
• Debugging webhook payloads

The tool formats JSON response bodies automatically and syntax-highlights them for readability.

Cookie Consent Generator

GDPR, ePrivacy Directive, and similar regulations require websites to obtain user consent before placing non-essential cookies. The Cookie Consent Generator produces ready-to-use HTML, CSS, and JavaScript for a compliant cookie banner.

Configuration options:

• Position - bottom bar, bottom-left corner, or modal overlay
• Categories - which cookie types to present (analytics, marketing, functional)
• Design - colors, font, button style to match your brand
• Text - customizable copy for all labels and descriptions
• Behavior - whether to block scripts until consent is given

Generated output includes an HTML snippet, the CSS styling, and a JavaScript event handler that fires when the user accepts or declines each category.

Content Security Policy Generator

Content Security Policy (CSP) headers tell browsers which resources your page is allowed to load. A well-configured CSP is one of the most effective defenses against cross-site scripting (XSS) attacks.

The generator provides a checkbox UI for every CSP directive:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src https://fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';

The generator explains each directive in plain English and warns you about dangerous values like unsafe-inline and unsafe-eval that weaken the policy.

---

Image Tools (5 New)

Image Cropper

The Image Resizer already existed, but the new Image Cropper adds precise cropping with preset aspect ratios:

• Free-form - drag any rectangular selection
• 1:1 - square, useful for profile photos
• 16:9 - widescreen, standard for video thumbnails and hero images
• 4:3 - traditional photo aspect ratio
• 3:2 - DSLR sensor ratio
• Custom - type in exact pixel dimensions

The cropped image exports to the same format as the original (PNG, JPEG, WebP) without uploading anything to a server.

Watermark Generator

The Watermark Generator adds text or image watermarks to photos with fine-grained position and opacity control.

Text watermark options:

• Font family and size
• Color and opacity
• Position (nine presets: corners, centers, midpoints)
• Rotation angle
• Tile mode (repeat watermark across the entire image)

Image watermark options:

• Upload a logo or signature image
• Control position and size
• Adjust opacity
• Maintain aspect ratio

This is useful for photographers sharing work online, content creators protecting screenshots, and developers watermarking design mockups before client review.

Device Mockup Generator

The Device Mockup Generator wraps screenshots in realistic device frames. Upload a screenshot and select a device:

• iPhone 15 Pro - 393x852pt, rounded corners, Dynamic Island
• Samsung Galaxy S24 - Android flagship form factor
• iPad Pro 12.9" - landscape or portrait
• MacBook Pro 14" - keyboard and bezel included
• Desktop monitor - generic flat panel

The output is a PNG with the screenshot rendered inside the device frame. This is the standard format for App Store screenshots, marketing pages, and product demos.

EXIF Data Viewer

The EXIF Data Viewer reads the metadata embedded in JPEG and TIFF photos without uploading the file anywhere. All parsing happens in-browser using JavaScript.

Metadata categories displayed:

The GPS coordinates, when present, link to Google Maps so you can see exactly where the photo was taken.

Privacy note: EXIF data can reveal sensitive information - your home address if you photograph there, your location history from a photo dump. The viewer is a useful tool for checking what metadata your photos contain before sharing them publicly.

---

Developer Tools (5 New)

AES Encryption Tool

The AES Encryption tool encrypts and decrypts text using AES-256-GCM, currently the gold standard for symmetric encryption. All cryptographic operations use the Web Crypto API, which runs in a browser security sandbox and never exposes raw keys to JavaScript code.

How it works:

Plaintext + Password
       |
       v
PBKDF2 (100,000 iterations, SHA-256)
       |
       v
256-bit AES Key + Random 96-bit IV
       |
       v
AES-256-GCM Encrypt
       |
       v
IV + Ciphertext + Auth Tag (Base64)

The output is a Base64-encoded string containing the IV, ciphertext, and authentication tag. You need the same password to decrypt it. The authentication tag in GCM mode provides integrity verification - any tampering with the ciphertext will cause decryption to fail.

Use cases:

• Encrypting sensitive notes before storing them in cloud services
• Sharing confidential configuration values with a team member via a secure channel
• Encrypting API keys or tokens in configuration files

This tool intentionally does not store the encryption key anywhere. If you lose the password, the ciphertext is unrecoverable.

HTTP Headers Checker

While the HTTP Request Builder lets you make requests, the HTTP Headers Checker focuses specifically on response headers for any URL. It shows a clean, categorized view of all response headers with explanations:

• Security headers - Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, HSTS
• Caching headers - Cache-Control, ETag, Last-Modified, Expires
• CORS headers - Access-Control-Allow-Origin, Access-Control-Allow-Methods
• Server headers - Server, X-Powered-By
• Content headers - Content-Type, Content-Encoding, Content-Length

For each security header, the tool rates its configuration (present, missing, or misconfigured) and explains what an optimal value looks like.

Code Screenshot

The Code Screenshot tool generates beautiful, shareable images from code snippets. This is the standard format for technical Twitter/X posts, blog headers, and documentation.

Options include:

• Language - syntax highlighting for 100+ languages
• Theme - One Dark, GitHub, Dracula, Monokai, Night Owl, and more
• Background - solid color, gradient, or transparent
• Padding - control whitespace around the code block
• Window chrome - optional macOS traffic light dots or plain frame
• Scale - 1x, 2x, 3x for different resolution needs

The output is a PNG or SVG file, downloaded directly to your device.

Browser Feature Support

The Browser Feature Support checker integrates with the MDN Browser Compatibility Data API to show which browsers support any CSS property, HTML element, or JavaScript API.

Enter a feature name (e.g., CSS grid, WebP, fetch, Intl.RelativeTimeFormat) and get a compatibility table showing:

• Chrome, Firefox, Safari, Edge, Opera (desktop)
• Chrome Android, Firefox Android, Safari iOS (mobile)
• The version number where support was added
• Notes about partial support, prefixes, or flags

This is valuable during feature planning - before building a feature that relies on a specific API, you can check whether your users' browsers support it.

---

Text and Generator Tools (8 New)

Dummy Data Generator

The Dummy Data Generator generates realistic fake data for testing and development. You define a schema using a simple field configuration, and the generator produces as many records as you need.

Available field types:

Output formats: JSON array, CSV, SQL INSERT statements, or JavaScript array literal.

Example output as JSON:

[
  {
    "id": "e4a7c891-1f3b-4d9e-8c2a-f5b3d7e9a1c4",
    "name": "Amara Okonkwo",
    "email": "amara.okonkwo@example.com",
    "phone": "+1 (555) 847-2391",
    "created_at": "2024-06-15"
  },
  {
    "id": "7b2d4e9a-3c5f-4a1b-9d8e-2f6a4c8b1d3e",
    "name": "Liam Hoffmann",
    "email": "liam.hoffmann@example.com",
    "phone": "+1 (555) 293-7841",
    "created_at": "2024-08-22"
  }
]

This is the most common use case for seeding databases during development, populating UI prototypes with realistic-looking data, and generating test fixtures for automated tests.

API Mock Response Generator

The API Mock Response Generator is a step beyond the Dummy Data Generator. Instead of standalone fake data, it generates realistic API responses in the structure you define.

You provide a JSON schema or a sample response object, and the generator fills in realistic values for all fields. For example, given this schema:

{
  "type": "object",
  "properties": {
    "user": {
      "type": "object",
      "properties": {
        "id": { "type": "integer" },
        "name": { "type": "string", "format": "full-name" },
        "email": { "type": "string", "format": "email" },
        "role": { "type": "string", "enum": ["admin", "editor", "viewer"] }
      }
    },
    "posts": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": { "type": "integer" },
          "title": { "type": "string", "format": "sentence" },
          "published_at": { "type": "string", "format": "date-time" }
        }
      },
      "minItems": 2,
      "maxItems": 5
    }
  }
}

The generator produces a complete, structurally correct API response. This is useful for:

• Frontend development when the backend API is not ready yet
• Writing API documentation with realistic examples
• Creating test fixtures for integration tests
• Presenting API designs to stakeholders with concrete data

Word Frequency Analyzer

The Word Counter counts total words, characters, sentences, and paragraphs. The new Word Frequency Analyzer goes deeper, showing you which words appear most often in any text.

The analyzer:

• Counts every unique word with its frequency
• Sorts by frequency (descending)
• Filters common stop words (the, a, an, is, are, etc.) with a toggle
• Calculates lexical density (ratio of unique words to total words)
• Highlights the top 20 words in the original text

This is useful for:

• SEO keyword analysis - checking whether a page uses its target keywords at an appropriate frequency
• Academic writing - ensuring variety and avoiding repetitive language
• Content editing - identifying overused phrases
• Text analysis and natural language processing experiments

Text Similarity Checker

The Text Similarity Checker computes how similar two pieces of text are using multiple algorithms:

Each algorithm answers a slightly different question. Levenshtein is good for detecting typos and small edits. Jaccard works well for comparing documents of different lengths. Cosine similarity is the basis for most search and recommendation systems.

Use cases:

• Detecting if two user submissions are plagiarized copies of each other
• Checking whether a rewritten paragraph maintains its essential meaning
• Building a duplicate detection tool for content moderation
• Evaluating the quality of machine translation output

---

The Cross-Tool Workflow Picture

With 112 tools available, the most powerful workflows often chain multiple tools together. Here are a few complete pipelines:

From API Response to TypeScript Type

1. Copy a JSON API response from your browser's network tab
2. Paste it into the JSON Formatter to verify and pretty-print it
3. Paste it into JSON to TypeScript to generate an interface
4. Copy the TypeScript interface into your codebase

From Domain to Full Security Audit

1. Run DNS Lookup to check all records are correctly set
2. Run SSL Certificate Checker to verify certificate validity
3. Run HTTP Headers Checker to audit security headers
4. Run Website Speed Test to check Core Web Vitals
5. Run SEO Analyzer to check meta tags and page structure

From Design Mockup to Production CSS

1. Use the Color Palette tool to generate your design system colors
2. Use the Font Pair Generator to select typography
3. Use the CSS Grid Generator to build the layout
4. Use the Box Shadow Generator for card elevation
5. Use the CSS Animation Generator for transitions
6. Use the Color Contrast Checker to verify accessibility

From Image to Web-Ready Asset

1. Use the Image Resizer to resize to target dimensions
2. Use the Image Compressor to reduce file size
3. Use the Watermark Generator to add attribution
4. Use the EXIF Data Viewer to verify no sensitive metadata remains
5. Use the Device Mockup Generator for marketing screenshots

---

Complete Tool Count by Category

Here is the current tool breakdown after this release:

---

Privacy Architecture: How All 112 Tools Stay Client-Side

Every tool in ToolBox processes data locally in your browser. There are no server-side processing endpoints for user data. Here is how different categories of tools achieve this:

File Processing Tools (Image Compressor, EXIF Viewer, PDF Tools)

These use the browser's File API to read files directly from your disk into memory. Processing happens using JavaScript libraries loaded as WebAssembly modules (for heavy operations) or pure JavaScript (for lighter tasks). The processed output is generated as a Blob URL and downloaded directly to your device.

// Files never leave the browser
const file = input.files[0];
const arrayBuffer = await file.arrayBuffer();
const processedData = await processInBrowser(arrayBuffer);
const outputBlob = new Blob([processedData], { type: 'image/jpeg' });
const downloadUrl = URL.createObjectURL(outputBlob);

Cryptography Tools (AES Encryption, Hash Generator)

These use the browser's Web Crypto API, which is implemented in native code and executes in a separate security context from the JavaScript engine. Keys are never logged, stored, or transmitted.

Network Tools (DNS Lookup, SSL Checker, Speed Test)

These necessarily make network requests to external services. The DNS Lookup tool queries Cloudflare's DNS over HTTPS endpoint. The SSL Checker and Speed Test tools query public APIs. In all cases, only the domain name you type is sent to the external service - not your identity, account, or any other data.

Data Transformation Tools (JSON Formatter, Base64, CSV to JSON)

These are pure functions that run entirely in JavaScript on your text input. No network requests are made at all.

---

What Is Coming Next

With the core tool set complete across all major categories, the next phase focuses on depth and quality:

• Tool Chainer - visually connect tools so the output of one feeds into the input of the next
• Favorites and Quick Access - pin your most-used tools for instant access
• Bulk Operations - process multiple files or multiple inputs at once for applicable tools
• Keyboard Navigation - navigate between tools entirely by keyboard
• Offline Mode - service worker caching so tools work without an internet connection

---

Explore All 112 Tools

Browse the complete collection by category on the homepage or use the search bar to find any tool by name, tag, or description.

If you use the JSON Formatter, Diff Checker, or Regex Tester regularly, check out the recent upgrade that added auto-convert on paste, Ctrl+Enter keyboard shortcut, and persistent drafts via localStorage.

Every tool is free, private, and runs entirely in your browser. There are no accounts, no limits, and no data ever leaves your machine.