A growing set of free tools for people who build interfaces: Tailwind and shadcn helpers, CSS generators, color maths, converters and encoders. No signup, no ads, everything runs in your browser.
Turn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class.
Write variants as one line each and get the cva() call, the defaults and the VariantProps type, in the shape shadcn components use.
Fill in a form and get a valid registry item and registry.json, with the file types inferred and the rules the shadcn CLI enforces checked as you type.
Paste two Tailwind class strings and see exactly which classes were added, removed and kept, plus which of the old ones cn() would silently override if the new string were merged on top.
See exactly what cn() keeps and what it throws away when a caller's className meets a component's own classes, with the losing classes listed.
Put a class list back in order: layout first, then the box, then what is inside it, with variants after the base classes they modify.
Turn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.
Paste a tailwind.config.js and get the v4 CSS it becomes: an @theme block with the right variable namespaces, and a note for every part that needs a decision.
Set each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.
Build a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token.
Cut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value.
Stack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class.
Build a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable.
Drag the curve, watch it race a linear square, and copy the easing as CSS, as a Tailwind arbitrary value or as a theme token.
Pick a size at a small viewport and a size at a wide one and get the clamp() that glides between them, as CSS, a Tailwind arbitrary value or an @theme token, read out at five real widths.
Build a frosted panel over a real backdrop: tint, blur, saturation, border and radius, copied as CSS or as a full set of Tailwind utilities.
See a palette the way readers with protanopia, deuteranopia, tritanopia or achromatopsia see it, and get told which pairs collapse into each other.
Check a text and background pair against every WCAG 2 threshold at once, with a live sample in both sizes and the ratio as you adjust the colors.
Paste a color in any notation and read it back in all of them, including OKLCH, Lab and Display P3, each one a click from your clipboard.
Blend two colors across as many steps as you need, in OKLCH or sRGB, and copy the ramp as color-mix() declarations or as plain hex.
Build a palette from one color using the classic hue relationships, each hue shown at five lightness steps and exported as @theme variables.
Put the same two colors through both interpolation spaces side by side, see where sRGB loses its chroma, and copy the gradient that keeps it.
Convert CSS rules or a bare declaration list into JavaScript style objects, camelCased and quoted, ready for a style prop or a CSS-in-JS file.
Read a CSV into JSON records, including quoted fields holding separators or line breaks, with numbers and booleans converted or kept as text.
Paste a curl command and get the fetch or axios call it stands for, with headers, JSON bodies and basic auth carried across.
Paste HTML and get JSX React accepts: class becomes className, inline styles become objects, comments and void elements are handled.
Turn a page or a fragment into clean Markdown: headings, lists, tables, code blocks and links, with the script tags left behind.
Compare two JSON documents by what they hold rather than how they are written, and get every added, removed and changed path.
Turn an array of objects into a spreadsheet-ready CSV, with nested objects flattened into dotted columns and quoting handled by the rules.
Turn a JSON payload into a Go struct with json tags, gofmt-aligned columns and omitempty where the sample says a field is optional.
Generate Python dataclasses from a JSON payload, with nested objects lifted into their own classes and snake_case field names.
Paste a JSON payload and get a TypeScript interface, with optional fields worked out from the records that disagree.
Convert JSON into readable YAML: quotes only where they are needed, block scalars for multi-line strings, and sequences written the way people write them.
Paste a JSON payload and get a Zod v4 schema with the inferred TypeScript type, ready for a form resolver or an API route.
Read a URL's parameters as JSON, or build a query string from an object, with repeated keys handled as the arrays they are.
Turn an SVG into a typed React component that forwards props, with hard-coded fills swapped for currentColor so the icon takes the text color.
Convert XML, an RSS feed or an SVG into JSON, with attributes kept as @name and repeated siblings collected into arrays.
Read a YAML config into JSON: nested maps, sequences, block scalars, inline collections and comments, with the ambiguous parts refused rather than guessed.
Turn any text into every case at once, with the words found properly so XMLHttpRequest and user_id both come out right.
Replace across a whole block of text, literally or by regular expression, with the capture groups available in the replacement.
Sort A to Z, deduplicate, reverse, shuffle, trim or number a list of lines in one pass, then copy the result without opening a spreadsheet.
Generate placeholder paragraphs, sentences, words or list items, with the classic opening line if you want it.
Paste rows from a spreadsheet, a CSV or any delimited text and get a padded Markdown table back, with the header and alignment row written for you.
Paste a Markdown document and get a nested table of contents with GitHub-style anchor links, headings inside code fences ignored, and the depth range and list style under your control.
Turn titles into URL slugs in bulk, with accents folded to their Latin letters rather than dropped, and an optional length limit that cuts on a word.
Compare two versions of text or code line by line, see exactly what was added and what was removed, and copy the result as a unified diff patch.
Break text into characters and read each one's code points, byte length and escapes, with the invisible characters called out.
Count words, characters, sentences and paragraphs as you type, with reading and speaking time, and characters counted the way a person counts them.
Encode text to base64 or decode it back, with UTF-8 handled correctly and a URL-safe variant for tokens and query strings.
Hash any text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, in hex or base64, computed in your browser.
Sign a message with a shared secret and read the HMAC in hex or base64, with the Web Crypto code to verify it on the other side.
Escape markup so it renders as text, or decode entities back, with an option to escape every non-ASCII character for older pipelines.
Paste a JSON Web Token and read its header, payload and expiry. Decoding only, in your browser, with no secret asked for and nothing sent anywhere.
Convert between binary, octal, decimal, hex and base 36 with exact BigInt arithmetic, a two's complement view at 8 to 64 bits, and prefixes like 0x and 0b understood on input.
Generate passwords from your browser's cryptographic random source, with the character sets you choose and the entropy shown as you change them.
Percent-encode a value or decode one back, choosing between a single query value and a whole URL, with the parts listed out when the input is a URL.
Generate UUID v4, time-sortable UUID v7 or Nano IDs in bulk, from your browser's own cryptographic random source.
Read a cron expression in a sentence, see the next six times it fires in your own zone, and start from a preset if the fields are the part you never remember.
Pick a time in one zone and read it in all the others at once, with the offsets shown and daylight saving handled by the browser's own database.
Turn a Unix timestamp into ISO, UTC and your own time zone at once, or paste a date and read the epoch back. Seconds and milliseconds both.
Build a .gitignore from the stacks you actually run, with the lines that matter and none of the historical noise.
Every HTTP status code worth knowing, from 200 and 301 to 429 and 503, with a line on when to reach for it rather than a paraphrase of the RFC.
Format, validate, sort or minify JSON. Unquoted keys, trailing commas and comments are accepted, so a pasted console log works as well as a strict file.
Write the title, description and image once and get the full head, the Next.js metadata object, and a preview of the card people will actually see.
Test a JavaScript regular expression against real text, see every match highlighted in place, and read the capture groups out one by one.
Turn a one-line query into something reviewable: clauses on their own lines, joins indented under them, keywords in capitals.
Turn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads.
The viewport of every device you are asked to support, in the CSS pixels a media query actually reads, with the Tailwind breakpoint each one lands in.
Search Lucide and Hugeicons by name, preview every match at the size you will ship it at, and copy the import and the JSX tag each set expects.
Convert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath.
Build a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables.