Tools for Designer
139 hand-picked tools for Designer. Free, private, browser-based.
-
Ad Copy Checklist
Verify every element of your ad before launch — headline, CTA, compliance, and technical setup
-
ASCII Art Generator
Generate ASCII art from text — figlet-style banners, multiple fonts.
-
Aspect Ratio Calculator
Calculate aspect ratio — fix any 1 of [width, height, ratio], get the other two.
-
Avatar Generator
Generate avatars from initials, identicons, or random shapes. Download PNG/SVG.
-
Base64 Encoder & Decoder
Encode or decode Base64 — text, files, and Data URLs. Runs entirely in your browser.
-
Base64 Image Converter
Image ⇄ Base64 — drag-drop PNG/JPG/WebP/SVG, get data URI for CSS / HTML / Markdown.
-
Base64 Image Data URI Converter
Convert images to data URIs (base64 or URL-encoded), inspect any data URI, preview and download. 100% in-browser.
-
Base64 to File Converter
Paste raw Base64 or a data URL, decode it locally, inspect bytes, and download the reconstructed file.
-
Board Foot Calculator
Thickness × width × length ÷ 12 = board feet — multi-row cut list, per-BF cost, imperial ⇄ m³ — browser-only
-
CSS Border Radius Generator
Border radius generator — independent 8-corner control + blob shape randomizer, live preview, copy CSS or SVG path.
-
CSS Box Shadow Generator
Visual CSS box-shadow builder — multi-layer, inset, color/blur with live preview.
-
Air Conditioner BTU Calculator
Room area × ceiling × orientation × people → cooling BTU/h, 匹 (horsepower) and kW — sizes an AC right the first time — browser-only.
-
CSS Design Token Contrast Matrix
Paste CSS variables or JSON tokens, select fg/bg pairs, and flag every WCAG AA/AAA failure across your design system at once.
-
Carpet Calculator
Rooms + roll width + waste → linear metres, billed area (m² / ft² / sq yard) and cost — browser-only
-
Case Converter
Convert text between camelCase, snake_case, kebab-case, PascalCase, Title Case, UPPER, lower — instant, browser-only
-
Chinese Lorem Ipsum Generator
Han-character placeholder text that fills a column the way real Chinese copy will, three styles, browser-only
-
Classroom Color Wheel
Interactive color wheel with harmony explorer and color mixing — complementary, analogous, triadic, split-complementary, and tetradic schemes for teachers and students.
-
CSS Clip-Path Generator
Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles.
-
Color Blindness Simulator
Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy.
-
Color Contrast Checker
Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.
-
Color Converter
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only
-
Color Mixer
Color mixer — blend any two colors with adjustable ratio, RGB/HSL/LAB color space, predict the result and copy hex.
-
Color Shades Generator
Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only
-
Color Temperature to RGB
Kelvin color temperature to approximate RGB and HEX, with a live swatch and lighting references, all in your browser
-
Complementary Color Calculator
One base color → complementary, split, triadic, tetradic, analogous and monochromatic schemes on the HSL color wheel — copy every HEX, browser-only
-
Concrete Calculator
Slab, column, round footing & stairs → cubic meters/yards + cement bags, sand and gravel — browser-only
-
Tailwind Palette Contrast Matrix
Paste Tailwind colors, CSS theme tokens, or JSON palettes and audit every foreground/background pair for WCAG AA and AAA contrast.
-
CSS Button Generator
Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export
-
CSS clamp() Fluid Typography Generator
CSS clamp() fluid typography generator — min/max font size, viewport range, full type scale (h1-h6 + body), copy CSS / Tailwind.
-
CSS Color Format Converter
Convert any color between HEX, RGB, HSL, OKLCH, CSS variable, and Tailwind — with live preview.
-
CSS Cubic Bezier Generator
Drag two handles, read the cubic-bezier() — five built-in presets, motion preview, solve y for any progress, browser-only
-
CSS Filter Generator
Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string
-
CSS Flexbox Generator
Generate production-ready flexbox CSS from visual controls — pick a layout preset, tweak properties, copy CSS, Tailwind, or React inline styles in one click.
-
CSS Flexbox Playground
Visual CSS Flexbox sandbox — tweak container and item properties live, see the layout update instantly, copy ready-to-use CSS.
-
CSS Font Stack Generator
CSS font stack generator — system-safe font families with full Win/Mac/Linux/Android/iOS fallback chains, with CJK fallbacks, copy as CSS/Tailwind/SwiftUI.
-
CSS Formatter & Minifier
Format and beautify CSS — sort properties, indent rules, expand or minify.
-
CSS Grid Visual Generator
CSS grid visual generator — drag to set columns/rows, place grid-area named regions, copy ready CSS + HTML, with 12 layout templates.
-
CSS Grid Generator
CSS Grid generator — visually design grid layouts (rows/cols/gap/areas), copy CSS code, fully responsive.
-
CSS Keyframes Animation Generator
Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only
-
CSS Line Clamp Generator
Truncate text after N lines with a trailing ellipsis, copy the CSS and the Tailwind class, with live preview, browser-only
-
CSS Loaders Generator
CSS loaders — 40+ pure-CSS spinners/skeletons, customize color/size/speed, copy ready-to-use code.
-
CSS Media Query Generator
CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.
-
CSS Minifier
Minify CSS — strip comments, whitespace, shorten colors, merge selectors. 30-60% smaller.
-
CSS Pattern Generator
Pure-CSS geometric backgrounds — dots, grid, stripes, checkerboard, diagonal, cross — live preview, one-click copy, zero images
-
CSS Scrollbar Generator
Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only
-
CSS Shadow Generator Pro
CSS shadow generator pro — multi-layer box-shadow + text-shadow + filter:drop-shadow, with Material/Tailwind/Apple shadow presets and dark-mode preview.
-
CSS Specificity Calculator
Score any CSS selector as an (a, b, c) triple, compare which rule wins the cascade, and see exactly which digit decided it — browser-only
-
CSS Text Gradient Generator
Paint a gradient INTO your text with background-clip: text — live preview, font size/weight, copy cross-browser CSS with -webkit- prefixes.
-
CSS Text Shadow Generator
Visual CSS text-shadow builder — multi-layer, color, blur with live preview and shareable links.
-
CSS Transform Generator
CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos.
-
CSS Triangle Generator
Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only
-
CSS Variable Deduplicator
Find duplicates and keep one clean copy of css variables from pasted text or uploaded local files.
-
CSS Variable Extractor
Extract, dedupe, and export css variables from pasted text or uploaded local files.
-
CSS Variable List Converter
Convert css variables from pasted text or uploaded local files.
-
CSS Variable List Validator
Validate and explain issues in css variables from pasted text or uploaded local files.
-
CSS Variable Normalizer
Normalize, sort, and prepare css variables from pasted text or uploaded local files.
-
Cubic Bezier Editor
CSS cubic-bezier editor — drag two control points, preview live with bouncing ball + scaling box + opacity fade, copy CSS / JS / Framer Motion / GSAP / SVG path.
-
Delta E Color Difference Calculator
Two HEX colors in, perceptual ΔE out — CIE76, CIE94 and CIEDE2000 with a plain reading of the result — browser-only
-
Depth of Field Calculator
Near limit, far limit, total depth of field & hyperfocal distance from your sensor, focal length, aperture and focus distance — browser-only
-
Drywall Calculator
Wall + ceiling area → sheets, drywall screws, joint tape & compound — metric and imperial — browser-only
-
Emoji Finder
Unicode 15.1 / 1500+ emojis with bilingual search — one-click copy, browser-only
-
Emoji Kitchen
Emoji mashup — combine two emojis to make a new one (Unicode-only, no Google API, with 500+ pre-defined combos).
-
Emoji Recommender
Emoji recommender — paste your headline or post, get matching emoji suggestions.
-
Exposure Value (EV) Calculator
EV = log2(N²/t) from aperture + shutter + ISO, plus equivalent-exposure solving and a Sunny-16 reference — browser-only
-
Favicon Generator
Generate favicon set — text or upload, output 16x16 / 32x32 / 180x180 / 512x512 PNG.
-
Fence Calculator
Total run + post spacing → posts, panels/pickets, rails, concrete bags — metric & imperial — browser-only
-
File to Base64 Converter
Upload a small file and convert it to raw Base64 or a data URL locally for embeds, fixtures, and tests.
-
Flexbox Playground & CSS Generator
Flexbox playground — toggle every container and item property on a real flex box and copy the exact CSS. direction, justify, align, gap, order, grow/shrink/basis, align-self. 100% client-side.
-
Flooring Calculator
Room sizes + flooring type + box coverage + waste → net area, boxes, planks, and cost — metric or imperial, browser-only.
-
Font File Inspector
Upload TTF or OTF files and extract family names, PostScript names, version, units per em, glyph count, and table list.
-
Font Pairing Generator
Font pairing generator — 50+ curated Google Fonts pairs (heading + body) with live preview, classifications, CSS export.
-
Glassmorphism Generator
Glassmorphism CSS generator — backdrop-filter blur + transparency + border, live preview with 8 background presets, copy CSS/Tailwind/SwiftUI.
-
Golden Ratio Calculator
Split any length by φ = 1.618 — long/short segments, golden sequence, font scale, layout columns, golden rectangle — browser-only
-
CSS Gradient Generator
Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export.
-
Gradient Mesh Generator
Gradient mesh generator — 4-12 control points with bilinear blend, output as SVG, PNG, CSS multi-radial-gradients fallback for older browsers.
-
Graph Paper Generator
Printable square, dot, isometric, ruled and coordinate paper as crisp SVG sized in real millimetres, runs entirely in your browser
-
Grass Seed Calculator
Lawn area + species + new/overseed → exact seed weight and bag count — metric & US — browser-only
-
Gravel Calculator
Area + depth → volume, tonnes, bulk bags — driveways, drainage, paths — browser-only
-
Hex Color Deduplicator
Find duplicates and keep one clean copy of hex colors from pasted text or uploaded local files.
-
Hex Color Extractor
Extract, dedupe, and export hex colors from pasted text or uploaded local files.
-
Hex Color List Converter
Convert hex colors from pasted text or uploaded local files.
-
Hex Color List Validator
Validate and explain issues in hex colors from pasted text or uploaded local files.
-
Hex Color Normalizer
Normalize, sort, and prepare hex colors from pasted text or uploaded local files.
-
HTML Color Names
HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.
-
HTML Form Extractor
Upload or paste HTML and extract forms, methods, actions, fields, labels, required flags, autocomplete, password fields, and security risks.
-
HTML Minifier
Minify HTML — strip comments, whitespace, optional attributes, inline CSS/JS. 40-60% smaller.
-
Google Fonts CSS2 URL Builder
Parse, edit, and generate Google Fonts CSS2 links, HTML preconnect tags, @import CSS, variables, and Tailwind font stacks.
-
ID Photo Resizer
Resize any photo to passport, visa, or ID spec — center-crop to exact pixels, fully in-browser, no upload
-
Image Compressor (Local)
Image compressor — squeeze JPG/PNG/WebP without server upload, with quality slider, batch mode, file size comparison.
-
Image Cropper
Image cropper — drag to crop, fixed ratios (1:1 / 16:9 / 9:16 / 4:3), zoom, rotate, fully client-side.
-
Image EXIF Privacy Scanner
Scan uploaded images for EXIF, GPS, camera, software, dates, XMP, and ICC privacy indicators.
-
Image Format Converter
Image format converter — JPG ↔ PNG ↔ WebP ↔ AVIF, batch + transparent background handling, 100% client-side.
-
Image Host
Upload an image, get a permanent direct link plus ready-to-paste Markdown, HTML and BBCode.
-
Image Metadata Inspector
Inspect PNG, JPEG, GIF, WebP, and SVG dimensions, bit depth, ICC, EXIF, XMP, animation, and notes.
-
Image Resizer
Image resizer — resize JPG/PNG/WebP by pixels/%/preset, fully client-side, no upload.
-
Image Target Size Compressor
Compress one image to a target KB size locally with quality search, automatic downscaling, preview, and download.
-
Image to PDF
Image to PDF — combine JPG, PNG & WebP into one PDF, drag to reorder, pick A4/Letter/fit-to-image, 100% in your browser.
-
Image Watermark
Image watermark — text or image watermark with position grid, opacity, tile mode, batch processing.
-
Invoice Generator
Free invoice generator — clean PDF in your browser, no signup, no watermark.
-
JS Minifier
Minify JavaScript — strip comments, whitespace, optional name shortening. 40-70% smaller.
-
Lorem Ipsum Generator
Classic Lorem Ipsum filler text — paragraphs, sentences, or words — copy in one click, browser-only
-
Megapixel Calculator
Width × height → megapixels, aspect ratio, file size, and max print size at any DPI. Reverse it too. 100% in your browser.
-
Meta Tag Generator
Generate SEO meta tags — title, description, Open Graph, Twitter Card, Schema.org.
-
Mock Data Generator
Generate realistic mock JSON / CSV / SQL data — names, emails, dates, addresses, nested objects.
-
Monogram Generator
Type a name, get an etiquette-correct monogram — traditional surname-in-centre or modern equal-size, circle/square/diamond frame, copy or download the SVG — browser-only
-
Mulch Calculator
Garden bed area + spread depth → cubic yards, bags and bulk — multi-bed, metric/imperial — browser-only
-
Multicultural Name Generator
Random names from 11 cultures — Chinese, English, Japanese, Korean, Arabic, Russian + 5 European.
-
Neumorphism Generator
Neumorphism CSS generator — soft-UI inset/outset shadow pair, live light-source direction, 12 presets, copy CSS/Tailwind/SwiftUI.
-
OKLCH Color Converter
OKLCH ⇄ HEX, RGB and HSL with a full sRGB → OKLab → OKLCH pipeline, live swatch and sRGB gamut warning — browser-only
-
Paint Calculator
Wall area → litres & cans of paint, with doors/windows deducted, coats and price — metric & US units, browser-only
-
Paper Size Reference
A4, Letter, A3, B5 and every ISO and US sheet in mm, cm, inches and pixels at 72/150/300 DPI, browser-only
-
Paper Weight GSM Calculator
GSM ⇄ US basis weight (lb) by paper grade, plus single-sheet weight from sheet size — browser-only
-
Password Generator
Generate strong, cryptographically random passwords and passphrases — entirely in your browser.
-
PDF Page Size Inspector
Inspect PDF MediaBox and CropBox dimensions to catch mixed page sizes before print, merge, or upload.
-
Placeholder Image Generator
Generate placeholder images instantly — size, color, text, PNG/JPG/WebP.
-
Plant Spacing Calculator
Bed size + in-row & row spacing → exact plant count — square vs triangular layout — browser-only
-
PPI Calculator
Pixel density, dot pitch, physical size, aspect ratio & a retina check from resolution + diagonal — all in your browser
-
PX REM EM Converter
CSS px ↔ rem ↔ em converter — visual scale, base font size adjustable.
-
QR Code Generator
Generate QR codes from text, URL, WiFi or vCard — customize color and size, download as PNG or SVG.
-
RAG Status Color Generator
Build traffic-light RAG palettes — pick hex codes, export CSS variables, JS tokens, or Tailwind config for any process dashboard
-
Ratio Calculator
Solve a:b = c:x, simplify ratios, split a total by a ratio, scale a recipe up or down — with full steps, browser-only
-
RGB to CMYK Converter
RGB and HEX to CMYK for print, plus CMYK back to RGB, with a live swatch and one-click copy, all in the browser
-
Roofing Calculator
Roof footprint + pitch → real sloped area, roofing squares, shingle bundles or sheets and underlayment rolls — metric & US, browser-only
-
Slope Calculator
Two points in, full line out — slope, angle, distance, midpoint, y = mx + b and grade % — browser-only
-
Smart Quotes Converter
Straight quotes to curly quotes and back, with smart apostrophes, en and em dashes, and ellipsis, all in your browser
-
Social Media Aspect Ratio Guide
Social media aspect ratio guide — Instagram / TikTok / YouTube / X / LinkedIn / Xiaohongshu / Bilibili exact pixel dimensions and ratios.
-
Square Footage Calculator
Add every room, get one total in ft² and m² at once — waste % + cost — browser-only
-
Stair Calculator
Total rise + steps → rise/run, slope, Blondel comfort check + side-view diagram — metric & imperial, browser-only
-
SVG Asset Auditor
Audit SVG viewBox, dimensions, scripts, external references, styles, ids, classes, title, and desc tags.
-
SVG Blob Generator
Generate smooth organic blob shapes — adjustable complexity, randomness, seed — export SVG / CSS clip-path — 100% browser-only
-
SVG Optimizer
SVG optimizer — strip comments/metadata/empty attributes, round path decimals, collapse useless groups, minify in browser. No upload.
-
SVG to Data URI / CSS Background
Inline any SVG as a data URI — URL-encoded (smaller) or base64 — with ready-to-paste CSS, HTML and bare-URI output, side-by-side size diff, 100% in-browser.
-
SVG to PNG Converter
Rasterize SVG to PNG in your browser — custom size, 1×/2×/3× HiDPI scale, true transparent background, never uploaded.
-
SVG Wave Generator
Generate smooth SVG wave dividers for landing pages — adjustable waves, amplitude, layers, seed — flip top/bottom — export SVG / CSS — browser-only
-
Tailwind CSS Cheatsheet
Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.
-
Tile Calculator
Room area + tile size + grout joint + waste → tiles, boxes, and cost — metric or imperial, browser-only.
-
Type Scale Generator
Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only
-
Wallpaper Calculator
Wall size + roll spec + pattern repeat → strips per roll, total strips, rolls to buy — handles straight & half-drop match — browser-only
-
WCAG Color Contrast Fixer
WCAG color contrast fixer — input fg/bg, get current ratio, auto-suggest 4 fixed colors hitting AA/AAA while preserving hue.