Posts

Showing posts from October, 2026

UUID Generator

UUID Generator Generate random version-4 UUIDs in bulk, and validate any UUID in the checker below. How many (1–100) UPPERCASE Include hyphens Generate UUIDs Copy All Generated UUIDs UUID Validator — paste a UUID Validate UUID Validation result will appear here. The UUID Generator creates universally unique identifiers, the 128-bit codes that databases, APIs, and distributed systems use as IDs that never collide in practice. Generate one, five, or up to a hundred version-4 UUIDs at a time, in your choice of uppercase or lowercase, with or without hyphens, then copy them all in one click for seeding databases, test fixtures, or request tracing. Randomness comes from your browser's cryptographic generator, through crypto.randomUUID where available and a standards-faithful getRandomValues fallback elsewhere. Version-4 UUIDs are built from random bits with the version and variant fields set correctly, which is why the third group always begins with 4 and the fourt...

SHA Hash Generator

SHA Hash Generator Generate SHA-1, SHA-256, SHA-384, or SHA-512 hashes of text or a file using your browser's built-in cryptography. Algorithm SHA-256 SHA-1 SHA-384 SHA-512 Text input Or choose a file Generate Hash Copy Hash Clear Your hash will appear here. The SHA Hash Generator computes secure hash fingerprints of text or files using the Web Crypto API built into your browser. SHA hashes verify downloads, sign data, build integrity checks, and power countless protocols: change one byte of input and the fingerprint changes completely, while identical input always produces the identical hash. Four algorithms are on offer. SHA-256 is the everyday standard and the right default for checksums and verification. SHA-384 and SHA-512 serve systems that ask for longer hashes, and SHA-1 is included only for compatibility with older checksums, because it is no longer considered collision-safe for security purposes and the tool says so openly. Text is encoded as UTF-8 befor...

MD5 Hash Generator

MD5 Hash Generator Generate an MD5 hash of text or a file. MD5 is useful for checksums and fingerprints — never for passwords (see the note below). Text input Or choose a file UPPERCASE output Generate MD5 Copy Hash Clear Your hash will appear here. The MD5 Hash Generator produces the familiar 32-character MD5 fingerprint of any text or file you give it, entirely in your browser. MD5 hashes are used to verify downloads, spot duplicate files, fingerprint cache keys, and compare data quickly: change even one byte of the input and the hash is completely different, while the same input always gives the same hash. You can type or paste text, or choose a file and hash its exact bytes. An uppercase toggle matches the formatting some systems expect, and the copy button puts the result on your clipboard. This page carries its own compact MD5 implementation in vanilla JavaScript, because browsers do not include MD5 in their modern crypto API. The honest warning, repeated becaus...

CSS Triangle Generator

CSS Triangle Generator Make pure-CSS triangles for tooltips, carets, and arrows with the border trick, no images needed. Direction Up Down Left Right Top-left corner Top-right corner Bottom-left corner Bottom-right corner Width (px) Height (px) Colour CSS output Copy CSS The CSS Triangle Generator creates triangles with pure CSS, using the classic border trick, so you never need an image file for a tooltip arrow, dropdown caret, or corner ribbon again. The technique is elegant but famously fiddly: a zero-size element whose four borders meet as triangles, where making three borders transparent leaves the fourth as a perfect triangle. Instead of memorising which border to colour for each direction, you simply choose one of eight directions: up, down, left, right, or any of the four right-angle corners. Set the width, height, and colour, watch the live preview, and copy the ready-made CSS class. Corner triangles are ideal for folded-corner effects and ribbon tags, while ...

CSS Box Shadow Generator

CSS Box Shadow Generator Move the sliders and watch the shadow change on the preview box, then copy the CSS. Horizontal offset: 8 px Vertical offset: 10 px Blur: 20 px Spread: 0 px Opacity: 25 % Shadow colour Inset shadow Preview Presets Soft Float Sharp Dreamy CSS output Copy CSS The CSS Box Shadow Generator creates polished drop shadows with sliders instead of guesswork. Shadows sell depth on cards, buttons, and modals, but the box-shadow syntax packs position, blur, spread, colour, and opacity into one dense line that is genuinely hard to tune blind. This tool gives every value its own control and a live preview box on a neutral stage, so you design the shadow by eye. Horizontal and vertical offsets move the shadow, blur softens its edge, spread grows or shrinks it, and opacity blends it over any background using a proper rgba colour. Tick Inset to flip the shadow inside the element for pressed or carved effects. Four preset buttons, Soft, Float, Sharp, and Dre...

Color Picker and CSS Gradient Generator

Color Picker and CSS Gradient Generator Pick two or three colours, set the direction, and copy ready-to-paste CSS. Colour 1 Colour 2 Use colour 3 Type Linear Radial Angle (linear only): 90 ° CSS output Copy CSS The Color Picker and CSS Gradient Generator builds smooth colour blends and hands you the exact CSS to use them. Gradients give headers, buttons, and hero sections depth that flat colour cannot, but writing gradient syntax from memory, especially angles and multi-stop blends, invites trial and error. Here you simply pick colours and watch the preview respond. Choose two colours, or tick the box to blend through a third in the middle. Switch between linear gradients, which flow in a straight direction controlled by the angle slider, and radial gradients, which bloom outward from the centre. Every change updates the large preview and the CSS output together, so what you see is literally the code you copy. The generator uses the standard CSS gradient functions...

Color Converter

Color Converter Type a colour in HEX, RGB, or HSL and get every format with one-click copy. Colour (try #1a73e8, rgb(26,115,232), or hsl(214,82%,51%)) Convert The Color Converter translates a colour between the formats designers and developers actually use: HEX for stylesheets, RGB for screens and code, HSL for intuitive adjustments, and HSV for graphics tools. Every program seems to speak a different colour dialect, and hand-converting between them with a calculator is slow and error-prone. Type a colour in any of the accepted formats, or pick one visually with the colour swatch, and the tool instantly shows all four formats with the colour previewed in a large swatch. Each value has its own Copy button, so the exact string you need lands on your clipboard in the format your project expects, with no reformatting by hand. The maths is the standard colour-space conversion used across the web platform, done locally in your browser. Nothing is uploaded, there are no accoun...

Markdown and HTML Converter

Markdown and HTML Converter Convert Markdown to HTML with a live preview (powered by the marked library from cdnjs), or convert simple HTML back to basic Markdown. Input Markdown → HTML HTML → Markdown (basic) Copy Output Download Output Clear Output Preview (for Markdown → HTML) Preview will appear here. The Markdown and HTML Converter works in both directions between the writing format people love and the markup browsers need. Markdown lets you write headings, emphasis, links, and lists with simple punctuation. When that text has to live on a web page, in an email template, or inside a content system, it must become HTML. This tool makes the jump in one click, with a live preview so you can see the rendered result before you copy anything. Markdown to HTML is the full-featured direction. It is powered by marked, a well-known library loaded from the cdnjs network and verified before use, and it handles headings, bold and italic, links, images, lists, code blocks, bloc...

HTML Live Editor

HTML Live Editor Write HTML, CSS, and JavaScript in the three boxes and see the result instantly. Use your own code only: the preview runs your script on this page. HTML Hello Edit me and watch the preview. Click me CSS body { font-family: sans-serif; padding: 16px; } h1 { color: #1a73e8; } JavaScript document.getElementById('b').addEventListener('click', function() { alert('It works!'); }); Run / Refresh Preview Clear All Live preview The HTML Live Editor is a small playground for web code: three panels for HTML, CSS, and JavaScript, and a preview that updates as you type. It is the quickest way to test a button style, try a layout idea, check a snippet from a tutorial, or show a beginner how the three languages fit together, without setting up files or a server. Your code is combined into a single document and loaded into the preview frame on this page. Typing pauses briefly and then refreshes the preview automatically, and the Run button ref...

HTML Encode and Decode

HTML Encode and Decode Escape text so it displays safely inside HTML, or turn HTML entities back into plain text. Also encode non-ASCII characters as numeric entities Input Encode Decode Copy Result Clear Result The HTML Encode and Decode tool converts between raw characters and HTML entities, the escape codes that let a browser display characters instead of interpreting them as markup. Type a real less-than sign into a page and the browser tries to read a tag; write it as an entity and it shows as text. Anyone who writes tutorials, shows code samples, or handles user-generated content needs this conversion constantly. Encoding escapes the five characters that matter most: the ampersand, angle brackets, and both quote styles, so your text can sit safely inside HTML or inside an attribute value. An optional setting also converts non-ASCII characters into numeric entities, which is handy for legacy pages with limited charset support. Decoding runs the process in reverse u...

URL Encode and Decode

URL Encode and Decode Encode text for safe use in URLs, or decode a percent-encoded string back to readable text. Mode Component (encodeURIComponent) — for query values Full URL (encodeURI) — keeps: /? & = intact Input Encode Decode Copy Result Clear Result The URL Encode and Decode tool converts text to and from percent-encoding, the system URLs use to carry characters that would otherwise break them. Spaces, ampersands, question marks, and non-English letters cannot travel raw inside a web address, so they are written as codes like %20 and %26. When you build links, debug query strings, or inspect a redirect, you constantly meet this encoding. Two modes cover the two real jobs. Component mode, the default, encodes everything needed for a single query value, including slashes and ampersands, which is the right choice for search terms and parameters. Full URL mode keeps the structural characters of a complete address, such as colons and slashes, and encodes only the...

SQL Formatter

SQL Formatter Paste a query to uppercase its keywords and lay clauses out on their own lines. Your SQL Format SQL Copy Result Clear Formatted result The SQL Formatter turns a dense one-line query into a structured, readable statement: major keywords are uppercased, each main clause starts on its own line, joins are indented, and conditions line up under WHERE with AND and OR stepped in. Queries pasted from application logs or ORM output are notoriously hard to review; a consistent layout makes logic errors and missing conditions visible at a glance. The formatter recognises the clauses working developers use daily, including SELECT, FROM, WHERE, GROUP BY, ORDER BY, HAVING, LIMIT, the common JOIN family, INSERT, UPDATE, and DELETE, and it tidies comma-separated lists onto separate lines. Keyword matching is word-boundary aware, so a column named "order_date" is never mistaken for the ORDER keyword. It is a formatter, not a validator: it will not connect to a databas...

JavaScript Minifier

JavaScript Minifier A conservative, line-based minifier: strips comments and blank lines and trims indentation. It never renames variables and never removes semicolons. Your JavaScript Minify JavaScript Copy Result Clear Minified result The JavaScript Minifier shrinks scripts the safe way: it removes comments and blank lines and trims leading indentation, line by line, without ever renaming variables, joining statements, or dropping semicolons. Aggressive minifiers squeeze more bytes but need a full parser and can surprise you; this conservative approach keeps your code's shape and meaning exactly intact while still cutting obvious fat. The limits are stated honestly. Because the tool works line by line, it will not rename identifiers, remove unreachable code, or pack statements onto one line, so its savings are smaller than a build pipeline's. In return, what comes out is what went in, minus comments and empty space, and it stays readable enough to debug. One practi...

JavaScript Beautifier

JavaScript Beautifier A light, token-aware formatter: indentation follows braces and statements get their own lines. Best for typical, already-working code. Your JavaScript Beautify JavaScript Copy Result Clear Beautified result The JavaScript Beautifier gives compressed or sloppily spaced JavaScript a readable shape: indentation that follows brace depth and one statement per line. Code copied from a minified bundle, a bookmarklet, or a chat answer is hard to review as a single blob. A quick pass of structure makes it possible to follow the logic again. The formatter is token-aware rather than a blind text squeeze. It recognises strings, template literals, and comments as single tokens so braces and semicolons inside them never disturb the layout, and it builds indentation from real brace nesting. Statements are separated carefully, keeping the semicolons inside for-loop headers on their line where they belong. An honest limit, stated plainly: this is a light formatter for t...

CSS Minifier

CSS Minifier Shrink CSS by stripping comments and whitespace safely, with strings and url() contents protected. Your CSS Minify CSS Copy Result Clear Minified result The CSS Minifier makes stylesheets smaller and faster to download by removing comments and collapsing whitespace, while carefully protecting the parts of CSS where spaces and characters are meaningful. A minified stylesheet loads quicker on every page view, and the saving multiplies across a whole site. Safety comes first in how this tool works. Before minifying, it sets aside every quoted string and every url() value and restores them untouched afterwards, so a content string containing a semicolon or a data URI is never mangled by whitespace rules. It then strips comments, squeezes repeated whitespace, and removes the optional spaces around braces, colons, semicolons, and combinators, finishing with an exact byte count and percentage saved. The output means exactly the same as the input to a browser; only the ...

CSS Beautifier

CSS Beautifier Paste CSS to format it with consistent brace-based indentation, one declaration per line. Your CSS Beautify CSS Copy Result Clear Beautified result The CSS Beautifier reformats tangled stylesheets into a consistent, readable layout: each rule opens on its own line, every declaration sits on its own indented line, and closing braces line up where you expect them. Styles copied from a minified file, a browser inspector, or an old project usually arrive as an unreadable block; this tool restores order in one click. The formatter is brace-based: it tracks opening and closing braces to set indentation depth, splits declarations at semicolons, and handles nested blocks such as media queries by indenting their contents a level deeper. Comments are removed during cleanup, so keep your original file if its comments carry notes you need. Consistent formatting pays off beyond looks. When every rule follows the same pattern, code reviews move faster, teammates can spot th...

HTML Minifier

HTML Minifier Shrink HTML by removing comments and collapsing whitespace. You control both options. Remove comments (conditional comments are kept) Collapse whitespace between tags Your HTML Minify HTML Copy Result Clear Minified result The HTML Minifier reduces the size of a web page's markup by removing the parts written for humans: comments and generous whitespace. Smaller HTML downloads faster, which helps visitors on slow connections and can trim real costs on busy sites. The size report shows the exact bytes before and after, measured on your actual input. You stay in control with two clear options. Remove Comments strips ordinary HTML comments while always protecting conditional comments that old browsers rely on. Collapse Whitespace squeezes the gaps between tags and repeated spaces into the minimum the markup needs. Honesty matters here: this minifier works on the markup itself. It does not rewrite, rename, or optimise the JavaScript and CSS inside your page b...