Code Tools for Developers
These are code tools for formatting, encoding, inspecting and styling: 45 of them, covering CSS, JSON, XML, hashes, tokens and the tags a page needs to publish. Every one runs in your browser.
45 tools
CSS and styling
- CSS Animation GeneratorThe CSS animation generator builds a complete keyframe animation, with duration, delay, timing function, iteration count and direction, and copies the CSS out.
- CSS Border Radius GeneratorThe CSS border radius generator sets each corner independently, shows the result live, and copies out the shorthand rule with the corners in the right order.
- CSS Box Shadow GeneratorThe CSS box shadow generator builds a shadow from offset, blur, spread, colour and opacity, previews it live, and copies the exact rule out for you to paste.
- CSS Button GeneratorThe CSS button generator styles a button through colour, padding, radius, font size, weight and shadow, then copies the rule out with the focus state included.
- CSS Clip Path GeneratorThe CSS clip path generator clips an element to a polygon, circle or ellipse, dragging the points directly on a preview and copying the clip-path rule out.
- CSS Cursor ViewerA CSS cursor viewer showing all 35 cursor values rendered by your own system, so you can see what each one actually looks like and what it signals to a user.
- CSS Filter GeneratorThe CSS filter generator combines blur, brightness, contrast, grayscale, hue-rotate and saturate into a single filter rule, previewed live on a sample image.
- CSS Flexbox GeneratorThe CSS flexbox generator sets flex-direction, justify-content, align-items, wrap and gap, with a live three-item preview showing what each property changes.
- CSS Gradient Text GeneratorBuild CSS gradient text with background-clip, previewed live, and copy the rule along with the solid-colour fallback that keeps the text readable if it fails.
- CSS Grid GeneratorThe CSS grid generator builds a grid template from column and row counts, gap and track sizing, with a live preview and the generated rule ready to copy out.
- CSS Keyframe GeneratorThe CSS keyframe generator writes just the @keyframes block for six common animations, leaving the animation shorthand to you so nothing is overwritten.
- CSS Text Shadow GeneratorThe CSS text shadow generator builds a shadow from offset, blur and colour, previewed on live text at the size you will actually use it, then copies the rule.
- CSS Transform GeneratorThe CSS transform generator combines translate, rotate, scale and skew into one rule, with a live preview showing the order the transforms are applied in.
- CSS Triangle GeneratorGenerate a pure-CSS triangle using the border trick, pointing in any of four directions.
- Glassmorphism GeneratorThe glassmorphism generator builds a frosted-glass panel from backdrop-filter, tint opacity and border, previewed over a gradient so the effect is visible.
- Gradient GeneratorThe gradient generator builds linear and radial CSS gradients from two colour stops, an angle and stop positions, with the rule copied out ready to paste.
- Neumorphism GeneratorThe neumorphism generator derives raised and pressed soft-UI shadows from one surface colour, and states the contrast problem the style creates for readers.
- SVG Wave GeneratorGenerate a wave-shaped SVG section divider from Bezier curves, with a short copyable path.
Formatters and minifiers
- CSS MinifierThe CSS minifier strips comments and whitespace safely, keeping licence headers intact and never touching the inside of a string, and reports the bytes saved.
- CSV ViewerA CSV viewer that opens a file as a sortable table with row filtering, parsed to RFC 4180 so quoted commas and embedded line breaks are handled correctly.
- HTML FormatterThe HTML formatter indents markup by nesting depth while leaving inline elements on one line and pre blocks untouched, so the rendered page never changes.
- JavaScript (JS) BeautifierThe JS beautifier reindents minified JavaScript so it can be read, with strings, regexes and comments left intact.
- JSON FormatterThe JSON formatter pretty-prints or minifies a document, sorts keys on request, and reports any parse error by line and column with the offending text shown.
- JSON ViewerA JSON viewer that opens a document as a collapsible tree, counting the children of every branch before you expand it, so a large file stays navigable.
- Markdown Table GeneratorThe Markdown table generator turns comma, tab or pipe-separated data into an aligned GitHub-flavoured table, with column alignment set per column as you like.
- SQL FormatterBreak a one-line SQL query onto readable lines, or collapse a formatted one back to a single line.
- SVG ViewerAn SVG viewer that previews markup at any zoom against four backgrounds, reporting the viewBox and the element count so you can see what a file really holds.
- XML FormatterThe XML formatter indents a document into a readable tree or minifies it to one line, leaving text-only elements untouched so no whitespace changes meaning.
Encoding and hashing
- Base64 Encoder and DecoderEncode text to Base64 or decode it back, with full Unicode support and the URL-safe alphabet.
- Bitwise CalculatorThe bitwise calculator applies AND, OR, XOR, NOT and all three shift operators, showing every result in decimal, binary and hexadecimal at the same time.
- File Checksum CalculatorThe file checksum calculator hashes a file with SHA-256 in your browser and compares it against a published value, so the file itself never leaves your machine.
- Hash CompareHash compare checks whether two checksums match, ignoring case and stray whitespace, and names the algorithm from the digest length so a mismatch is explained.
- Hash GeneratorGenerate SHA-1, SHA-256, SHA-384 and SHA-512 hashes in your browser via the Web Crypto API.
- JWT DecoderThe JWT decoder reads the header, payload and claims of a token in your browser, checks the expiry against now, and never sends the token off for verification.
- MAC Address FormatterThe MAC address formatter converts between five notations, and reads the OUI and the local and multicast bits so you can tell a real vendor address from one.
- URL Encoder and DecoderPercent-encode text three ways (query value, whole URL or form data) and decode it back.
Web and SEO
- Device InfoDevice info reported by your own browser: the fifteen values a page can read about your screen, platform and hardware, which is the data fingerprinting uses.
- Favicon GeneratorThe favicon generator resizes one image into the six sizes browsers actually request, and writes the HTML link tags that reference each of them correctly.
- Hreflang Tag GeneratorThe hreflang tag generator builds a reciprocal set with x-default, and catches the four mistakes that quietly break hreflang, starting with missing returns.
- JSON-LD Schema GeneratorThe JSON LD schema generator builds valid structured data for six schema.org types, including only properties your page actually shows, so nothing is invented.
- Meta Tag GeneratorThe meta tag generator builds the title, description, canonical and Open Graph tags for a page, correctly escaped, with the length limits shown as you type.
- Robots.txt GeneratorThe robots txt generator writes per-crawler rules and sitemap lines, and explains the common mistakes, including why disallow never removes a page from search.
- SERP Snippet PreviewA SERP snippet preview showing how a title and description may appear in results, with truncation measured in pixels rather than characters, as Google does.
- Subnet CalculatorThe subnet calculator works out the network address, broadcast address, usable host range and mask from any IPv4 address and prefix length you give it.
- UTM Link BuilderThe UTM link builder writes correctly tagged campaign URLs, enforcing the three required parameters and warning when inconsistent casing will split a report.
What these code tools cover
The 45 tools split into four groups. Eighteen generate CSS, from gradients and shadows to grid and flexbox layouts. Ten format or minify code, covering JSON, XML, HTML, CSS, SQL and JavaScript. Eight handle encoding and hashing, including Base64, URL encoding, SHA-256 and JSON Web Tokens. Nine cover web and search metadata, such as robots.txt, hreflang and structured data.
Nothing here is a browser inspector panel. If you are looking for the panel that opens with F12, that is built into your browser rather than hosted on a page. These tools do the jobs you would otherwise reach for a scratch file or a throwaway script to do.
Every formatter parses before it prints, so an invalid document is reported with a line and column rather than silently mangled. The encoders handle Unicode correctly in both directions, which is where the browser btoa function fails: it works on Latin-1 and throws on any character above 255.
Formatter, viewer or validator
Three tools can act on the same JSON document and they answer different questions, which is the most common confusion in this category.
| What you want | The tool |
|---|---|
| Readable text to paste somewhere else | JSON formatter, which pretty-prints or minifies and hands back text |
| To explore a large document on screen | JSON viewer, which renders a collapsible tree and counts each branch |
| To know why a document will not parse | JSON validator, which reports the line, the column and the likely cause |
| To read a token without verifying it | JWT decoder, which shows the claims and checks the expiry against now |
| To prove a download was not corrupted | File checksum calculator, then hash compare to check it against the published value |
| A CSS effect without writing it by hand | The 18 CSS generators, each copying out a complete rule |
Frequently asked questions
Is Base64 encoding a way of protecting data?
No. Base64 is a transport encoding with no key, and anyone holding the string can decode it. It exists so binary data survives channels that expect text. Use it for that, and use real encryption when the content needs protecting.
Does the JWT decoder verify the signature on a token?
No, and it deliberately cannot. Verifying a signature needs the signing secret or the public key, and pasting either into a web page would be a serious mistake. The decoder reads the header, the payload and the claims, and checks the expiry, which is what inspection usually calls for.
Will minifying my CSS or JSON break anything?
No, when the input is valid. The minifiers parse the document first and remove only whitespace and comments that carry no meaning, leaving strings untouched. Measure the compressed size before deciding it was worth it, because gzip already removes most of what minification targets.
Why does the hash of my file differ from the hash of its contents pasted as text?
Because the two inputs are different bytes. Hashing a file covers every byte including the trailing newline and any byte-order mark. Pasting the contents into a text box usually changes line endings or drops that mark, and any single-byte difference changes the whole digest.
Do these tools send my code anywhere?
No. Every tool here runs as JavaScript in your own tab, and the site has no application backend to receive anything. That matters most for the token and checksum tools, where the input is a live credential or a file you have reason to keep private.