HTML beautifier

Re-indent and pretty-print minified HTML — fully client-side.
Indent Wrap long attributes
Minified HTML
Beautified
How to beautify HTML

Paste minified HTML. Drop in the squashed markup.
Adjust indent. Pick 2 or 4 spaces, or tabs.
Copy or download. Grab the beautified output.
About beautification

js-beautify is the de-facto in-browser formatter behind editor.config-style integrations and countless online tools. The page hands it your input, returns a re-indented version, and you pick the indent style. Content-sensitive tags (<pre>, <textarea>) keep their inner whitespace so behaviour stays correct.
Frequently asked questions

What does the HTML beautifier do?
It re-indents minified or one-line HTML so it is readable — closing tags align, attributes wrap, and nested structure is obvious.
Does it change my HTML?
Whitespace only. Content nodes (
, , <script>, <style>) keep their internal whitespace; only structural indentation is rewritten.</dd></details><details class="group py-3"><summary class="flex cursor-pointer items-center justify-between gap-4 font-medium text-ink marker:content-none dark:text-ink-dark">Is anything uploaded?<svg class="h-4 w-4 shrink-0 text-ink-muted transition-transform group-open:rotate-180 dark:text-ink-muted-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><dd class="mt-2 text-ink-muted dark:text-ink-muted-dark">No. The page lazy-loads js-beautify in your browser and runs everything locally.</dd></details><details class="group py-3"><summary class="flex cursor-pointer items-center justify-between gap-4 font-medium text-ink marker:content-none dark:text-ink-dark">How is this different from the HTML minifier?<svg class="h-4 w-4 shrink-0 text-ink-muted transition-transform group-open:rotate-180 dark:text-ink-muted-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><dd class="mt-2 text-ink-muted dark:text-ink-muted-dark">Inverse operations — beautifier adds readability whitespace; minifier removes it. snip ships both so you can round-trip.</dd></details></dl></section> <section class="mt-section" aria-labelledby="related-heading"><h2 id="related-heading" class="text-xl">More Encoding & JSON tools</h2><div class="mt-4 flex flex-wrap gap-2"><a href="/html-minifier" title="Minify HTML markup." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>HTML minifier</a><a href="/js-beautifier" title="Format minified JavaScript." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>JavaScript beautifier</a><a href="/css-beautifier" title="Format and pretty-print CSS." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>CSS beautifier</a><a href="/sql-formatter" title="Pretty-print and format SQL queries." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>SQL formatter</a><a href="/json-formatter" title="Format, validate and beautify JSON." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>JSON formatter</a><a href="/json-diff" title="Compare two JSON documents structurally." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>JSON diff</a><a href="/json-to-csv" title="Convert a JSON array to CSV." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>JSON to CSV</a><a href="/csv-to-json" title="Convert CSV to a JSON array." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>CSV to JSON</a><a href="/json-to-xml" title="Convert JSON to well-formed XML." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>JSON to XML</a><a href="/xml-formatter" title="Validate and pretty-print XML." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>XML formatter</a><a href="/yaml-to-json" title="Convert YAML config to JSON." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>YAML to JSON</a><a href="/yaml-validator" title="Check YAML syntax and find errors." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>YAML validator</a><a href="/base64" title="Encode or decode Base64 strings." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>Base64 encode / decode</a><a href="/url-encode" title="Percent-encode or decode URLs." class="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-sm text-ink-muted transition-colors hover:border-accent hover:text-accent dark:border-hairline-dark dark:bg-surface-dark dark:text-ink-muted-dark dark:hover:border-accent-dark dark:hover:text-accent-dark"><svg class="h-3.5 w-3.5 shrink-0 text-accent dark:text-accent-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h10M4 17h7"></path></svg>URL encode / decode</a></div></section> </div>  </main> <footer class="mt-section border-t border-hairline bg-surface/50 dark:border-hairline-dark dark:bg-surface-dark/30"> <div class="mx-auto max-w-content px-4 py-section"> <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5"> <div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> SEO & meta </h2> <ul class="space-y-2 text-sm"> <li> <a href="/meta-tag-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Meta tag generator </a> </li><li> <a href="/robots-txt-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> robots.txt generator </a> </li><li> <a href="/sitemap-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Sitemap.xml generator </a> </li><li> <a href="/schema-markup-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Schema markup generator </a> </li><li> <a href="/og-image-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Open Graph image generator </a> </li><li> <a href="/utm-builder" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> UTM URL builder </a> </li>  </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Encoding & JSON </h2> <ul class="space-y-2 text-sm"> <li> <a href="/json-formatter" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> JSON formatter </a> </li><li> <a href="/json-diff" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> JSON diff </a> </li><li> <a href="/json-to-csv" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> JSON to CSV </a> </li><li> <a href="/csv-to-json" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> CSV to JSON </a> </li><li> <a href="/json-to-xml" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> JSON to XML </a> </li><li> <a href="/xml-formatter" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> XML formatter </a> </li> <li> <a href="/all-tools#all-encoding" class="font-medium text-accent hover:underline dark:text-accent-dark">
All Encoding & JSON →
</a> </li> </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Dev utilities </h2> <ul class="space-y-2 text-sm"> <li> <a href="/regex-tester" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Regex tester </a> </li><li> <a href="/cron-visualizer" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Cron expression visualizer </a> </li><li> <a href="/epoch-converter" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Epoch converter </a> </li><li> <a href="/diff-checker" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Diff checker </a> </li><li> <a href="/markdown-to-html" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Markdown to HTML </a> </li><li> <a href="/case-converter" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Case converter </a> </li> <li> <a href="/all-tools#all-dev" class="font-medium text-accent hover:underline dark:text-accent-dark">
All Dev utilities →
</a> </li> </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Generators </h2> <ul class="space-y-2 text-sm"> <li> <a href="/password-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Password generator </a> </li><li> <a href="/passphrase-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Passphrase generator </a> </li><li> <a href="/uuid-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> UUID generator </a> </li><li> <a href="/hash-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Hash generator </a> </li><li> <a href="/random-name-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Random name generator </a> </li><li> <a href="/username-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Username generator </a> </li> <li> <a href="/all-tools#all-generators" class="font-medium text-accent hover:underline dark:text-accent-dark">
All Generators →
</a> </li> </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> QR & barcode </h2> <ul class="space-y-2 text-sm"> <li> <a href="/qr-code-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> QR code generator </a> </li><li> <a href="/barcode-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Barcode generator </a> </li><li> <a href="/qr-code-reader" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> QR code reader </a> </li><li> <a href="/qr-code-decoder" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> QR code decoder </a> </li>  </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Images </h2> <ul class="space-y-2 text-sm"> <li> <a href="/favicon-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Favicon generator </a> </li><li> <a href="/image-compressor" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Image compressor </a> </li><li> <a href="/image-resizer" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Image resizer </a> </li><li> <a href="/image-converter" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Image converter </a> </li><li> <a href="/exif-stripper" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> EXIF stripper </a> </li><li> <a href="/image-to-pdf" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Image to PDF </a> </li> <li> <a href="/all-tools#all-images" class="font-medium text-accent hover:underline dark:text-accent-dark">
All Images →
</a> </li> </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> PDF </h2> <ul class="space-y-2 text-sm"> <li> <a href="/merge-pdf" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Merge PDF </a> </li><li> <a href="/split-pdf" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Split PDF </a> </li><li> <a href="/compress-pdf" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Compress PDF </a> </li><li> <a href="/organize-pdf" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Organize PDF pages </a> </li><li> <a href="/fill-pdf-form" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Fill PDF form </a> </li><li> <a href="/pdf-to-jpg" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> PDF to JPG </a> </li>  </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Documents </h2> <ul class="space-y-2 text-sm"> <li> <a href="/invoice-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Invoice generator </a> </li><li> <a href="/online-invoice-maker" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Online invoice maker </a> </li><li> <a href="/create-invoice-online" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Create invoice online </a> </li><li> <a href="/proforma-invoice-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Proforma invoice generator </a> </li><li> <a href="/contractor-invoice-template" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Contractor invoice template </a> </li><li> <a href="/freelance-invoice-template" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Freelance invoice template </a> </li> <li> <a href="/all-tools#all-documents" class="font-medium text-accent hover:underline dark:text-accent-dark">
All Documents →
</a> </li> </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Lookups </h2> <ul class="space-y-2 text-sm"> <li> <a href="/whois-lookup" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> WHOIS lookup </a> </li><li> <a href="/dns-lookup" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> DNS lookup </a> </li><li> <a href="/ssl-checker" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> SSL certificate checker </a> </li><li> <a href="/http-header-checker" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> HTTP header checker </a> </li><li> <a href="/ip-address-lookup" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> IP address lookup </a> </li><li> <a href="/reverse-dns-lookup" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Reverse DNS lookup </a> </li> <li> <a href="/all-tools#all-lookups" class="font-medium text-accent hover:underline dark:text-accent-dark">
All Lookups →
</a> </li> </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> CSS & design </h2> <ul class="space-y-2 text-sm"> <li> <a href="/css-grid-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> CSS Grid generator </a> </li><li> <a href="/css-flexbox-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> CSS Flexbox generator </a> </li><li> <a href="/box-shadow-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Box-shadow generator </a> </li><li> <a href="/text-shadow-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Text-shadow generator </a> </li><li> <a href="/css-clip-path-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> CSS clip-path generator </a> </li><li> <a href="/border-radius-generator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Border-radius generator </a> </li>  </ul> </div><div> <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-ink-muted dark:text-ink-muted-dark"> Network </h2> <ul class="space-y-2 text-sm"> <li> <a href="/subnet-calculator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Subnet calculator </a> </li><li> <a href="/cidr-calculator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> CIDR calculator </a> </li><li> <a href="/subnet-mask-calculator" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> Subnet mask calculator </a> </li><li> <a href="/ipv4-to-ipv6" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> IPv4 to IPv6 converter </a> </li><li> <a href="/ip-to-binary" class="text-ink-muted hover:text-accent dark:text-ink-muted-dark dark:hover:text-accent-dark"> IP to binary converter </a> </li>  </ul> </div> </div> <div class="mt-section flex flex-col gap-4 border-t border-hairline pt-6 text-sm text-ink-muted dark:border-hairline-dark dark:text-ink-muted-dark sm:flex-row sm:items-center sm:justify-between"> <div class="flex items-center gap-3"> <a href="/" class="inline-flex items-baseline font-semibold tracking-tight text-base" aria-label="snip.tools home"> <span class="text-ink dark:text-ink-dark">snip</span> <span class="mx-0.5 inline-block h-1.5 w-1.5 self-center rounded-full bg-accent dark:bg-accent-dark" aria-hidden="true"></span> <span class="text-ink-muted dark:text-ink-muted-dark">tools</span> </a> <span class="text-2xs">© 2026 · Operated by DevRig LLC, Wyoming, USA.</span> </div> <nav class="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Site and legal"> <a href="/all-tools" class="hover:text-accent dark:hover:text-accent-dark">All tools</a> <a href="/about" class="hover:text-accent dark:hover:text-accent-dark">About</a> <a href="/contact" class="hover:text-accent dark:hover:text-accent-dark">Contact</a> <a href="/how-it-works" class="hover:text-accent dark:hover:text-accent-dark">How it works</a> <a href="/privacy" class="hover:text-accent dark:hover:text-accent-dark">Privacy</a> <a href="/terms" class="hover:text-accent dark:hover:text-accent-dark">Terms</a>  </nav> </div> </div> </footer>   <div id="sr-status" class="sr-only" role="status" aria-live="polite"></div> <div id="snip-analytics-config" hidden data-src="https://analytics.devrig.ai/script.js" data-website-id="e322bf7d-728b-499c-8660-9e0ab5eb87d7"></div>  </body></html>