# generate.now — full content Long-form content (description, use cases, examples, FAQ) for every tool. Intended as a single source for LLMs and search crawlers. Site: https://generate.now Index: https://generate.now/llms.txt Pricing: https://generate.now/pricing.md (all tools free, no account) --- ## Cron Expression Generator URL: https://generate.now/cron Category: time Markdown: https://generate.now/cron.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: cron expression generator, natural language to cron, cron syntax, cron generator, cron to english, crontab generator ### Description Convert natural language schedules into valid cron expressions and back. Supports 5-field standard and 6-field (with seconds) variants. Shows next 5 run times and an expanded explanation of every field. ### Use cases - Schedule a backup every weekday at 2am - Trigger a deploy on the first of the month - Run a cleanup script every 15 minutes - Translate an inherited cron expression to plain English before editing it - Generate a cron string for GitHub Actions, Vercel Cron, or a Kubernetes CronJob ### Examples **Input:** every weekday at 9am ``` 0 9 * * 1-5 ``` *Runs at 9:00 AM on Monday through Friday.* **Input:** every 15 minutes ``` */15 * * * * ``` *Fires at minute 0, 15, 30, and 45 of every hour.* **Input:** first day of every month at midnight ``` 0 0 1 * * ``` *Useful for monthly billing or report jobs.* **Input:** every sunday at 3:30am ``` 30 3 * * 0 ``` *Common weekly maintenance window.* **Input:** twice an hour during business hours, monday to friday ``` 0,30 9-17 * * 1-5 ``` *Runs at :00 and :30 between 9am and 5pm on weekdays.* **Input:** every 6 hours ``` 0 */6 * * * ``` *Fires at 00:00, 06:00, 12:00, 18:00.* ### FAQ **What does a cron expression look like?** A standard cron expression has five fields separated by spaces: minute (0-59), hour (0-23), day of month (1-31), month (1-12), and day of week (0-7, where 0 and 7 are Sunday). Each field can be a number, a list (1,2,3), a range (1-5), a step (*/15), or a wildcard (*). **What's the difference between 5-field and 6-field cron?** 5-field cron starts with the minute field and is the standard format used by Unix cron, GitHub Actions, and Vercel Cron. 6-field cron adds a leading seconds field and is used by Quartz scheduler, Spring, and some other systems. Pick the variant that matches the system you're scheduling on. **How do I run a job every X minutes?** Use a step value in the minute field: */5 for every 5 minutes, */15 for every 15 minutes. The first run is at minute 0 and then at each subsequent interval. **How do I write a cron expression for the last day of the month?** Standard cron doesn't have a native 'last day' token. Some implementations (Quartz, AWS) support L for last. With standard cron, the workaround is to run on every day from the 28th and have your script check whether it's actually the last day. **Does this work for GitHub Actions and Vercel Cron?** Yes. GitHub Actions and Vercel Cron both use standard 5-field POSIX cron. Generate a 5-field expression and paste it into your workflow file or vercel.ts schedule. **Can I get an expression for a specific timezone?** Cron expressions themselves don't carry timezone information — they're interpreted in the timezone of the system running them. Most schedulers default to UTC. Be explicit about timezone in your scheduler config, then write the expression in that timezone. **What does the 'next run times' preview mean?** After you generate or paste a cron expression, the tool computes the next five times the job would run if started right now, using your local timezone. Use this to sanity-check that the expression matches what you intended. **Why is my cron expression invalid?** The most common causes are: a value outside the allowed range (e.g. 60 in the minute field), a missing or extra field, or using day-of-week names in a scheduler that only accepts numbers. The validation panel will point to the offending field. ### References - [POSIX crontab specification](https://pubs.opengroup.org/onlinepubs/9699919799/utilities/crontab.html) — The Open Group. The normative definition of crontab behaviour that standard 5-field cron implementations follow. - [crontab(5) manual page](https://man7.org/linux/man-pages/man5/crontab.5.html) — man7.org. Field-by-field reference for the crontab file format on Linux, including step and range syntax. - [Vercel Cron Jobs](https://vercel.com/docs/cron-jobs) — Vercel. How 5-field expressions are interpreted by Vercel Cron, including its UTC-only timezone rule. - [Events that trigger workflows](https://docs.github.com/en/actions/reference/workflows-and-actions/events-that-trigger-workflows) — GitHub. The schedule event, which accepts POSIX cron syntax and runs on UTC. --- ## Regex Generator URL: https://generate.now/regex Category: text Markdown: https://generate.now/regex.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: regex generator, natural language regex, regex builder, regex from description, regex tester, regular expression generator ### Description AI-powered natural language to regex. Generates a pattern with flags, explains each token, and lets you test against sample text with live highlighting. Built for the moments when you need a regex now and don't want to remember whether \d needs escaping. ### Use cases - Match all email addresses in a paragraph - Extract URLs from a log file - Validate UK postcodes or US ZIP codes - Find anything that looks like a phone number - Pull out semantic version strings like v1.2.3 ### Examples **Input:** match all email addresses except gmail ``` \b[A-Za-z0-9._%+-]+@(?!gmail\.com)[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b ``` *Matches valid email syntax but uses a negative lookahead to exclude gmail.com.* **Input:** find UK postcodes ``` \b[A-Z]{1,2}\d[A-Z\d]?\s?\d[A-Z]{2}\b ``` *Matches the standard UK postcode format.* **Input:** match a hex color, with or without # ``` #?[0-9a-fA-F]{6}\b ``` *Matches 6-character hex codes with an optional leading #.* **Input:** extract IPv4 addresses ``` \b(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\b ``` *Matches valid IPv4 addresses with bounded octets (0-255).* ### FAQ **Which flavor of regex does this generate?** By default the output is PCRE-compatible and runs as-is in JavaScript (ECMAScript), Python, Go, Java, and most other modern regex engines. Some flavor-specific tokens — like lookbehind in older JS engines — will be flagged in the explanation. **How do I use the generated regex in JavaScript?** Wrap the pattern in slashes with the flags after — for example /pattern/gi — or pass it as a string to new RegExp(pattern, 'gi'). Use String.prototype.match, matchAll, replace, or test depending on what you need. **What do the flags mean?** g matches all occurrences (not just the first), i is case-insensitive, m makes ^ and $ match line boundaries instead of the whole string, and s lets . match newlines. The tool picks sensible defaults but you can edit them. **Why does the explanation not match the regex exactly?** The token breakdown explains each meaningful piece — character classes, quantifiers, groups — in order. If the regex contains literal punctuation, it shows up as 'literal x' rather than as a separate token. If you spot a real mismatch, regenerate or refine the description. **Can I use this for password validation?** You can, but consider whether you actually need a regex. Most password rules — minimum length, character class requirements — are clearer when written as a sequence of small checks. Regex is a great fit for extraction and matching, less so for boolean validation against many rules. **Does the test panel save my pasted text?** No. The test panel runs entirely in your browser. Pasted text never leaves your device. ### References - [Regular expressions guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) — MDN Web Docs. Reference for JavaScript regex syntax, flags, groups, and lookaround. - [RegExp objects](https://tc39.es/ecma262/multipage/text-processing.html#sec-regexp-regular-expression-objects) — TC39. The ECMAScript specification text that defines how JavaScript engines evaluate patterns. - [PCRE2 pattern syntax](https://www.pcre.org/current/doc/html/pcre2syntax.html) — PCRE. Syntax summary for the PCRE flavour used by PHP, nginx, and many command-line tools. --- ## JWT Encoder & Decoder URL: https://generate.now/jwt Category: auth Markdown: https://generate.now/jwt.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: jwt decoder, jwt encoder, jwt generator, jwt token decoder online, json web token, jwt verify ### Description Paste a JWT to see its three parts broken out with claim explanations and expiry status, or build a new token by filling in the header and payload. Supports HS256, HS384, HS512, RS256, RS384, and RS512. Runs entirely in your browser — nothing is sent to a server. ### Use cases - Debug a 401 by inspecting the token your client is sending - Verify that 'exp' is set correctly before shipping a login flow - Generate a test token with a known secret for local development - Quickly check whether a payload contains the claims you expect ### Examples **Input:** eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkphbmUgRG9lIiwiaWF0IjoxNzAwMDAwMDAwfQ.signature ``` { alg: HS256, sub: 1234567890, name: Jane Doe, iat: 1700000000 } ``` *Decoded header and payload. The signature is shown but not verified without a secret.* **Input:** Build a token with sub=alex, exp=+1h, secret=supersecret ``` eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... ``` *Signed with HS256 using the provided secret.* **Input:** Decode a token with an expired exp claim ``` { sub: "u_8823", exp: 1735689600 } — expired 2 January 2025 ``` *The decoder resolves exp to a readable date and flags the token as expired.* **Input:** Verify HS256 signature with secret "supersecret" ``` Signature valid · alg HS256 · payload unmodified ``` *Supplying the secret turns decoding into verification — without it the signature is shown but unchecked.* ### FAQ **Is it safe to paste a JWT here?** All decoding happens in your browser using the jose library — your token never reaches our servers. That said, a JWT can be replayed if it's still valid, so don't paste production tokens into any random site (including this one) without rotating them afterwards. **How is decoding different from verification?** Decoding splits a JWT into its base64url-encoded parts so you can read them. Verification checks the signature against a known key. The decoder shows you both halves — but it only verifies if you provide the matching secret or public key. **What's the difference between HS256 and RS256?** HS256 uses a shared secret (HMAC SHA-256) — same key signs and verifies. RS256 uses an RSA private/public key pair — the private key signs, the public key verifies. Use RS256 when the verifier doesn't need to mint tokens. **Why does my token say 'expired'?** The 'exp' claim is a Unix timestamp. If it's earlier than the current time, the token has expired and most verifiers will reject it. The decoder shows a human-readable expiry next to the claim. **Can I edit a payload and re-sign?** Yes — switch to encode mode, paste the header and payload, set the algorithm, and provide a secret or private key. The tool produces a fresh signed token. **Do you support encrypted JWTs (JWE)?** Not yet. The decoder handles JWS (signed) tokens. JWE support is on the roadmap — let us know if you need it. ### References - [RFC 7519: JSON Web Token](https://datatracker.ietf.org/doc/html/rfc7519) — IETF. Defines the JWT format and the registered claims including exp, iat, sub, and aud. - [RFC 7515: JSON Web Signature](https://datatracker.ietf.org/doc/html/rfc7515) — IETF. Defines the signing structure behind the three-part token this tool decodes. - [RFC 7518: JSON Web Algorithms](https://datatracker.ietf.org/doc/html/rfc7518) — IETF. The algorithm registry covering HS256, RS256, and the rest of the alg values. - [JSON Web Token Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_Cheat_Sheet.html) — OWASP. Common JWT vulnerabilities, including algorithm confusion and missing expiry validation. --- ## UUID Generator URL: https://generate.now/uuid Category: data Markdown: https://generate.now/uuid.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: uuid generator, uuid v4, uuid v7, guid generator, uuid online, bulk uuid, uuid validator ### Description Generate one UUID or a thousand, in whatever version you need. v4 is fully random (default), v7 is timestamp-sortable, v1 is timestamp-based with a node ID, v8 is custom. Format the output as lowercase, uppercase, Base64, or URN. Includes a validator that decodes a UUID into its parts. ### Use cases - Generate a primary key for a quick test row in your database - Seed a fixture file with a thousand realistic IDs - Get a timestamp-ordered UUID v7 to use as a sortable identifier - Validate a UUID you pulled from a log and find out which version it is ### Examples **Input:** Generate 1 × UUID v4 ``` 5b1f2a8c-3e9d-4b1c-9f6e-1a2b3c4d5e6f ``` *Random UUID, the default for new identifiers in most systems.* **Input:** Generate 5 × UUID v7 ``` 0192f3a1-..., 0192f3a1-..., 0192f3a1-..., 0192f3a1-..., 0192f3a1-... ``` *Timestamp-sortable UUIDs. Newer UUIDs sort after older ones lexicographically.* **Input:** Validate 5b1f2a8c-3e9d-4b1c-9f6e-1a2b3c4d5e6f ``` Valid, version 4 (random) ``` *Confirms the input is a well-formed UUID v4.* ### FAQ **What's the difference between UUID v4 and v7?** v4 is 122 bits of randomness — collision-proof but unordered, which causes B-tree index fragmentation in databases. v7 prefixes 48 bits of millisecond timestamp before the random bits, so newer UUIDs sort after older ones. Use v7 when ordering matters. **Are these UUIDs cryptographically secure?** Yes. The tool uses the Web Crypto API (crypto.getRandomValues) for all randomness. That's the same source recommended for security-sensitive use in browsers and Node.js. **What's UUID v8?** v8 is the 'custom' version defined in RFC 9562. It lets you encode application-specific data into the UUID while still being a valid UUID. Most apps don't need v8 — pick v4 or v7 instead. **Should I store UUIDs as text or binary in Postgres?** Postgres has a native uuid type (16 bytes) — use it. It's smaller than text (37 bytes for the canonical form) and faster to index. The Drizzle / Prisma / Kysely uuid types map to it directly. **Can I generate UUIDs that are also valid ULIDs?** Not quite — ULID and UUID have different layouts. But UUID v7 covers the same need (timestamp-sortable IDs) and is far more widely supported. **Why does v1 expose my MAC address?** Historically v1 included the host's MAC address as the 'node' field, which was a privacy issue. Modern implementations (and this tool) randomize the node ID instead. Even so, prefer v4 or v7 for new code. **How many UUIDs can I generate at once?** The UI supports up to 1,000 per generation. Beyond that, hit the API in batches. ### References - [RFC 9562: UUIDs](https://datatracker.ietf.org/doc/html/rfc9562) — IETF. The current UUID specification, defining versions 1 through 8 including the sortable v7. - [RFC 4122: A UUID URN Namespace](https://datatracker.ietf.org/doc/html/rfc4122) — IETF. The original UUID specification, now obsoleted by RFC 9562 but still widely referenced. - [Crypto.getRandomValues()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues) — MDN Web Docs. The cryptographically secure randomness source this generator uses. --- ## JSON to TypeScript Types URL: https://generate.now/json-to-types Category: data Markdown: https://generate.now/json-to-types.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: json to typescript, json to types, json to interface, json to zod, json schema generator, json to valibot ### Description Convert any JSON sample into a TypeScript type definition or runtime schema. Toggle between interface, type alias, Zod, and Valibot output. Configure root name, optional fields, readonly modifiers, and how to handle nulls. Powered by quicktype. ### Use cases - Generate types for a third-party API you only have a sample response from - Bootstrap a Zod schema from a JSON fixture - Convert an inherited JSON blob into proper TypeScript before refactoring - Add runtime validation to a route that previously trusted unknown input ### Examples **Input:** { "id": 1, "name": "Alex", "active": true } ``` interface Root { id: number; name: string; active: boolean; } ``` *Basic interface inferred from a single sample.* **Input:** { "items": [{ "id": "a" }, { "id": "b", "label": "B" }] } ``` interface Root { items: Item[]; } interface Item { id: string; label?: string; } ``` *Array items are merged and fields present in only some objects become optional.* **Input:** { "id": 1, "name": "Alex" } // Zod output ``` z.object({ id: z.number(), name: z.string() }) ``` *Same shape as a Zod schema for runtime validation.* ### FAQ **How does the tool decide whether a field is optional?** For an array of objects, any field that's missing from at least one object becomes optional. For a single object, every field is required by default. You can toggle the 'mark optional' option to soften this. **What's the difference between an interface and a type alias?** For object shapes, they're nearly interchangeable. Interfaces can be augmented via declaration merging; type aliases support unions and primitives. The tool picks interface by default for object-shaped JSON. **When should I use Zod or Valibot instead of TypeScript types?** Use plain TS types when the data is already trusted (e.g. you control the producer). Use Zod or Valibot at the trust boundary — incoming HTTP requests, external API responses, env vars — where you want runtime validation to back the static type. **Why is a number sometimes typed as 'number' and sometimes as a literal?** If every sample shows the same literal value, the tool can narrow to that literal — useful for status fields like 'success' or 'error'. By default it widens to the broader primitive; you can override with the 'narrow literals' option. **How do nulls become 'unknown'?** When a field is null in the sample, the tool can't tell what its non-null type is. The default is to emit T | null where T is best-guessed, but you can switch to unknown to be more strict. **Does it support deeply nested objects?** Yes. Each nested object becomes its own type, named after the field. You can rename types in the output panel. ### References - [RFC 8259: The JSON Data Interchange Format](https://datatracker.ietf.org/doc/html/rfc8259) — IETF. The normative definition of JSON, including its value types and encoding rules. - [TypeScript everyday types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html) — Microsoft. Reference for the interface and type-alias forms this tool emits. - [Zod](https://zod.dev) — Zod. Documentation for the runtime schema output option, including inference to static types. - [quicktype](https://quicktype.io) — quicktype. The type-inference engine used to derive types from a JSON sample. --- ## .gitignore Generator URL: https://generate.now/gitignore Category: config Markdown: https://generate.now/gitignore.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: gitignore generator, .gitignore template, gitignore for next.js, gitignore for python, gitignore creator, gitignore from description ### Description Generate a tidy, well-commented .gitignore for any combination of languages, frameworks, and tools. Two modes: describe your project naturally and let AI assemble the file, or pick stacks from a curated list. Sections are labelled, comments are kept, and entries are deduplicated. ### Use cases - Bootstrap a fresh repo with a sensible .gitignore in seconds - Add a new language to an existing repo without searching for the right template - Get a .gitignore for a polyglot project where no single template fits - Audit your current .gitignore against best practice for your stack ### Examples **Input:** Next.js app with Python data scripts and a Rust CLI ``` # Next.js .next/ out/ # Python __pycache__/ *.py[cod] .venv/ # Rust target/ Cargo.lock ``` *Three stacks merged with comment headers and no duplicate entries.* **Input:** Select: Node.js, macOS, JetBrains, VSCode ``` # Node node_modules/ npm-debug.log* # macOS .DS_Store # JetBrains .idea/ # VSCode .vscode/ ``` *Standard combo for a Node project on a Mac.* **Input:** Go service with Docker and Terraform ``` # Go bin/ *.exe # Terraform .terraform/ *.tfstate *.tfstate.* # Docker .env ``` *Three toolchains merged, with Terraform state excluded because it routinely contains secrets.* **Input:** Python project with Jupyter notebooks ``` # Python __pycache__/ *.py[cod] .venv/ # Jupyter .ipynb_checkpoints/ # Data *.csv *.parquet ``` *Adds the notebook checkpoint directory that trips up most Python templates.* ### FAQ **Where does the template data come from?** The 'select' mode uses a curated set of templates derived from the github/gitignore repository, kept up to date with current best practice. The 'describe' mode uses AI to assemble a custom file for cases the curated set doesn't cover cleanly. **Is the order of entries significant?** Yes, but only in edge cases — later rules can override earlier ones with the ! prefix. The generator preserves a sensible order and avoids using ! unless you describe a need for it. **Should I commit .env files?** No. Commit .env.example with placeholder values; ignore .env and any .env.local variants. The generated .gitignore includes these by default. **Why is package-lock.json or pnpm-lock.yaml not ignored?** Lockfiles should be committed — they pin dependency versions for reproducible installs. The generator never adds them to .gitignore. **Does it handle nested .gitignore files?** Yes, indirectly: nested .gitignore files override the root one for their subtree. The tool generates root-level .gitignore content, but you can paste sections into nested files as needed. **How do I ignore a file that's already tracked?** A .gitignore entry only affects untracked files — Git keeps managing anything already in the index. Run git rm --cached path/to/file to untrack it while keeping it on disk, then commit. For a directory, add -r. ### References - [gitignore documentation](https://git-scm.com/docs/gitignore) — Git. The pattern format reference, covering negation, directory matching, and precedence. - [github/gitignore](https://github.com/github/gitignore) — GitHub. The community-maintained collection of per-language templates these outputs build on. --- ## Color Palette Generator URL: https://generate.now/palette Category: color Markdown: https://generate.now/palette.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: color palette generator, ai color palette, palette from text, hex color generator, oklch palette, color scheme generator ### Description Generate cohesive color palettes from a natural-language vibe. Each palette comes back as five swatches with one-click copy in hex, RGB, HSL, and OKLCH. Tweak any swatch and re-export. Powered by Claude for the seed → palette step; conversions run locally. ### Use cases - Kick off a brand exploration without opening a design tool - Get a palette for a landing page before a designer is involved - Translate a mood board prompt into usable CSS variables - Generate quick swatches for a data viz or chart series ### Examples **Input:** sunset over Tokyo ``` #ff9472, #f2709c, #5b3a8c, #1d2671, #c33764 ``` *A warm-to-cool gradient palette inspired by city dusk.* **Input:** minimal forest morning ``` #e8efe6, #b7c9b1, #8aa78a, #4f6b56, #243d33 ``` *Soft greens stepping from highlight to deep shadow.* **Input:** cyberpunk diner ``` #0d0221, #ff003c, #00f0ff, #ffd700, #f6019d ``` *High-contrast neons over near-black backgrounds.* **Input:** brutalist zine, high contrast ``` #f4f1de, #e07a5f, #3d405b, #81b29a, #f2cc8f ``` *Warm paper base with a terracotta accent and a deep navy for text.* ### FAQ **How does it pick the colors?** Claude proposes five hex values from your description. The tool then converts each to RGB, HSL, and OKLCH locally and previews them as swatches. **Can I edit a single swatch?** Yes. Each swatch is editable in any format — the others update live. Use it to fine-tune contrast, lightness, or chroma without leaving the page. **Why OKLCH and not just HSL?** OKLCH is perceptually uniform: a 10-point lightness change looks like a 10-point change to the eye. HSL doesn't have that property and can produce muddy mid-tones. Both are exported for compatibility. **Are the palettes accessible?** The tool aims for usable contrast but doesn't enforce WCAG ratios. Pair this with a contrast checker for production use, especially when picking text/background pairs. **How do I turn a palette into CSS variables?** Copy each swatch in the format you want and paste it into a :root block or your Tailwind theme. OKLCH is the best choice for a theme scale: lightness is perceptually uniform, so you can derive hover and disabled states by shifting the L channel alone without the hue drift you get doing the same thing in HSL. **How many colors should a palette have?** Five is enough for most interfaces — a background, a raised surface, a body text color, an accent, and one supporting tone. Semantic colors for success, warning, and error sit outside the palette because they carry fixed meaning rather than brand, and users expect them to look roughly the same everywhere. ### References - [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) — W3C. Defines the modern color spaces and notations used in the generated CSS. - [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — W3C WAI. The 4.5:1 and 3:1 contrast thresholds the palette checker validates against. - [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) — MDN Web Docs. Reference for the perceptually uniform color space used for lightness ramps. --- ## CSS Gradient Generator URL: https://generate.now/gradient Category: color Markdown: https://generate.now/gradient.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: css gradient generator, linear gradient, radial gradient, tailwind gradient, background gradient, css mesh gradient ### Description A visual gradient builder for CSS. Drag stops, set angle, pick linear or radial, and copy the result as a CSS background-image declaration or a Tailwind arbitrary value. Live preview reflects every change. ### Use cases - Build a hero background gradient that doesn't look like every other SaaS site - Translate a Figma gradient to clean CSS - Prototype a button or card surface with a subtle gradient sheen - Get the Tailwind class for an existing CSS gradient ### Examples **Input:** linear, 135°, #ff7a59 → #6a3093 ``` linear-gradient(135deg, #ff7a59 0%, #6a3093 100%) ``` *A standard two-stop diagonal sweep.* **Input:** radial, centered, three stops ``` radial-gradient(circle at 50% 50%, #f6d365 0%, #fda085 50%, #f76b1c 100%) ``` *Sunburst-style radial gradient with three color stops.* **Input:** linear, 90°, three stops with a midpoint hint ``` linear-gradient(90deg, #0ea5e9 0%, #6366f1 45%, #ec4899 100%) ``` *The middle stop sits at 45% rather than 50% so the blue holds slightly longer.* **Input:** vertical scrim for text over an image ``` linear-gradient(to bottom, rgba(13, 2, 33, 0) 0%, rgba(13, 2, 33, 0.9) 100%) ``` *Fades from fully transparent to near-opaque using one color at two alpha values.* ### FAQ **Can I add more than two color stops?** Yes — add as many stops as you need. Each stop has a position (0–100%) and a color. Drag the handles in the preview or edit the values directly. **What's the difference between linear and radial?** Linear gradients travel along a single axis you specify with an angle. Radial gradients emanate from a point in concentric rings. Conic gradients (around a point) are a separate type. **Why does my gradient look banded?** Banding usually comes from low contrast between adjacent stops on a wide gradient. Add intermediate stops, increase the color distance, or switch to OKLCH interpolation for a smoother fall-off. **Does the Tailwind output use the gradient utilities?** For two-stop gradients it uses Tailwind's bg-gradient utilities. For three or more stops or unusual angles, it emits an arbitrary value (bg-[linear-gradient(...)]) so you don't lose fidelity. **How do I fade a gradient to transparent without it going grey?** Fade to a zero-alpha version of the same color rather than to the transparent keyword. In most engines transparent resolves to rgba(0, 0, 0, 0), so interpolating toward it drags the midpoint through black. Use rgba(255, 122, 89, 0) — the same RGB with alpha 0 — and the fade stays clean. **Can I animate a CSS gradient?** Not directly. background-image isn't an animatable property, so browsers jump between gradients instead of interpolating. The three workarounds are animating background-position across an oversized gradient, cross-fading two stacked layers with opacity, or registering a custom property with @property and animating that value. ### References - [linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) — MDN Web Docs. Syntax reference for gradient lines, color stops, and interpolation hints. - [CSS Images Module Level 3](https://www.w3.org/TR/css-images-3/) — W3C. The specification that defines gradient rendering and color-stop placement. --- ## Color Picker & Converter URL: https://generate.now/color Category: color Markdown: https://generate.now/color.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: color picker, color converter, hex to rgb, hex to hsl, hex to oklch, rgb to cmyk, color format converter ### Description A single-color workbench: enter any format, see all the others. Includes hex, RGB, HSL, OKLCH, CMYK, and the closest CSS named color. Pick from a native color picker or type a value. Conversions are deterministic and run entirely in the browser. ### Use cases - Convert a hex code from a screenshot into RGB for a print spec - Get the OKLCH equivalent of a Figma color for use in Tailwind v4 - Find the closest CSS named color for a hex value - Sanity-check a CMYK value before sending to a printer ### Examples **Input:** #ff7a59 ``` rgb(255, 122, 89) · hsl(11, 100%, 67%) · oklch(73% 0.18 30) ``` *Same color in three different formats.* **Input:** rgb(48, 209, 88) ``` #30d158 · hsl(135, 63%, 50%) · closest named: limegreen ``` *Apple's system green, with its named-color neighbor.* **Input:** rebeccapurple ``` #663399 · rgb(102, 51, 153) · hsl(270, 50%, 40%) ``` *A CSS named color resolved into the three most common notations.* **Input:** oklch(72% 0.19 30) ``` #ff7a59 · rgb(255, 122, 89) · hsl(11, 100%, 67%) ``` *Going the other direction — a modern OKLCH value converted back to legacy formats.* ### FAQ **Is OKLCH lossless from sRGB?** Within the sRGB gamut, yes. Some OKLCH values lie outside sRGB (wide-gamut displays) — the tool flags those and shows the clamped sRGB equivalent. **How accurate is the CMYK conversion?** CMYK is device-dependent and requires a color profile for true accuracy. The tool uses a naive sRGB→CMYK formula that's fine for screen reference but should not be used in place of a print-side conversion. **What does 'closest named color' mean?** CSS defines about 150 named colors (red, dodgerblue, lavenderblush, etc). The tool finds the one with the smallest perceptual distance to your input using ΔE in OKLCH. **Which color format should I actually use in CSS?** Hex is fine for one-off static values and is still the most portable. Use OKLCH for anything you generate a scale from — tints, shades, hover states — because equal lightness steps look equal to the eye. OKLCH has been supported in all major browsers since 2023. **How is the contrast ratio calculated?** As (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and darker color. The result runs from 1:1 for identical colors to 21:1 for black on white. WCAG 2.2 asks for at least 4.5:1 for body text, and 3:1 for large text (24px regular or 18.66px bold) and for UI component boundaries. **Can hex codes include transparency?** Yes — eight-digit hex adds an alpha byte, so #ff7a5980 is the same color at 50% opacity. It's supported in every current browser. Four-digit shorthand (#f7a8) works the same way as three-digit shorthand does for opaque colors. ### References - [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) — W3C. Normative definitions for hex, rgb, hsl, oklch, and conversion between them. - [ data type](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) — MDN Web Docs. Practical reference for every CSS color notation this tool converts between. - [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — W3C WAI. How the contrast ratio shown alongside each conversion is calculated. --- ## CSS Box Shadow Generator URL: https://generate.now/box-shadow Category: color Markdown: https://generate.now/box-shadow.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: css box shadow generator, box shadow, tailwind shadow, soft shadow, neumorphism shadow, css drop shadow ### Description Compose box shadows visually. Stack multiple layers, tweak offset, blur, spread, color, and opacity for each, and watch the preview update live. Output as plain CSS or as a Tailwind arbitrary value. Common shadow presets are one click away. ### Use cases - Find the right elevation for a card without 5 minutes of trial and error - Build a layered shadow that doesn't look like a default Material drop - Translate a Figma shadow effect into CSS for production - Get the Tailwind arbitrary-value form of a custom shadow ### Examples **Input:** soft elevation, 4px y-offset, 16px blur, 8% opacity ``` box-shadow: 0 4px 16px 0 rgba(0,0,0,0.08); ``` *A subtle card-elevation shadow.* **Input:** two-layer crisp shadow ``` box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08); ``` *A near-surface highlight stacked with a softer ambient layer.* **Input:** focus ring, 3px accent at 40% opacity ``` box-shadow: 0 0 0 3px rgba(163, 230, 58, 0.4); ``` *Zero offset and zero blur turns box-shadow into a ring that ignores the layout box.* **Input:** pressed state for a button ``` box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); ``` *An inset shadow along the top edge reads as the surface being pushed in.* ### FAQ **What is shadow spread?** Spread grows (positive) or shrinks (negative) the shadow before blur is applied. A positive spread creates a halo; a negative spread keeps the shadow inside the element's bounds. **Should I use inset shadows?** Inset shadows render inside the element. They're useful for pressed-button affordances and neumorphic effects, but readable depth usually comes from outset shadows. **How do I avoid the 'AI default' shadow look?** Single hard shadows tend to look generic. Stack two or three layers — a tight near-surface shadow plus a softer ambient one — and bias the color slightly toward the surrounding hue instead of pure black. **How do I make a shadow that still reads in dark mode?** Black shadows disappear against dark surfaces because there's nothing left to darken. Two things work instead: a hairline border a little lighter than the surface, or an inset highlight along the top edge that mimics a light source. Keep the drop shadow too, but expect it to do almost none of the work. **What's the difference between box-shadow and drop-shadow?** box-shadow follows the element's border box, so a transparent PNG casts a rectangular shadow. filter: drop-shadow() follows the alpha channel, so it traces the actual shape — the right choice for logos, icons, and cutouts. drop-shadow has no spread parameter. **Do box shadows hurt performance?** Large blur radii are expensive to repaint, and the cost scales with the blurred area rather than the element size. One big shadow is fine; dozens animating at once is not. If you need a shadow to change on hover, cross-fade a second pre-rendered layer's opacity rather than animating the shadow values. ### References - [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) — MDN Web Docs. Reference for offset, blur, spread, inset, and multi-shadow syntax. - [CSS Backgrounds and Borders Module Level 3](https://www.w3.org/TR/css-backgrounds-3/) — W3C. The specification that defines how box shadows are painted and layered. --- ## Glassmorphism Generator URL: https://generate.now/glassmorphism Category: color Markdown: https://generate.now/glassmorphism.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: glassmorphism generator, frosted glass css, backdrop-filter blur, glass effect, tailwind glassmorphism, css glass ### Description A live workbench for glassmorphism. Adjust backdrop blur, background opacity, saturation, border, and corner radius and see the result on a sample card over a colorful backdrop. Export as CSS or Tailwind classes. ### Use cases - Build a glass nav bar that floats over a hero image - Get the right blur amount for a frosted modal backdrop - Translate a Figma glass card into production-ready CSS - Test how a glass treatment reads in light and dark mode ### Examples **Input:** blur 12px, opacity 60%, saturation 140% ``` background: rgba(255,255,255,0.6); backdrop-filter: blur(12px) saturate(1.4); ``` *A typical glass card surface.* **Input:** tinted glass over dark hero ``` background: rgba(20,20,30,0.5); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255,255,255,0.08); ``` *Darker glass with a hairline highlight border for a clear edge.* **Input:** Tailwind output for a light glass card ``` backdrop-blur-xl bg-white/60 saturate-150 border border-white/20 rounded-2xl ``` *The same treatment expressed in utility classes rather than raw CSS.* **Input:** frosted modal backdrop ``` background: rgba(10, 10, 12, 0.4); backdrop-filter: blur(24px); ``` *Heavier blur and a dark tint, so the modal content stays the focal point.* ### FAQ **Why doesn't backdrop-filter work in my browser?** Most evergreen browsers support backdrop-filter, but it requires -webkit-backdrop-filter for Safari. The generated CSS includes the prefix automatically. **Does glassmorphism work over solid backgrounds?** The blur effect only does meaningful work when there's something behind it to blur. Over a flat solid color you'll just see the background tint — pair it with imagery, gradients, or a busy backdrop. **What's a good starting point for blur and opacity?** Try 10–16px blur with 50–70% background opacity. Boosting saturation by 20–40% (saturate(1.2)–saturate(1.4)) keeps colors from going grey. **Why is nothing blurring behind my element?** backdrop-filter blurs whatever is painted behind the element, so the element's own background has to be partially transparent for any of it to show. A solid background:#fff cancels the effect entirely. Start around rgba(255, 255, 255, 0.6) and adjust from there. **Why does the blur spill past the rounded corners in Safari?** Safari needs the -webkit-backdrop-filter prefix, and it clips the backdrop against the element's own border-radius rather than an ancestor's. Set border-radius and overflow: hidden on the same element that carries the backdrop-filter. **Is glassmorphism accessible?** It can be, but contrast becomes a moving target — the text sits over whatever happens to be scrolling underneath. Test against the worst-case backdrop rather than the demo image, and if you can't hold 4.5:1 for body text, put the text on a more opaque inner layer and keep the glass purely decorative. ### References - [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) — MDN Web Docs. The property that produces the frosted-glass blur, plus its browser support notes. - [Filter Effects Module Level 1](https://www.w3.org/TR/filter-effects-1/) — W3C. Defines the filter functions that backdrop-filter accepts, including blur() and saturate(). - [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — W3C WAI. Why translucent surfaces need contrast checking against the worst-case backdrop. --- ## Avatar Generator URL: https://generate.now/avatar Category: identity Markdown: https://generate.now/avatar.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: avatar generator, identicon generator, initials avatar, placeholder avatar, svg avatar, deterministic avatar ### Description Type a name, email, or any seed string and get a consistent avatar for it. Three styles: initials (with auto-colored backgrounds), geometric (gradient + shape), and identicon (5×5 mirrored pattern, GitHub-style). Output is SVG for crisp scaling. ### Use cases - Generate placeholder avatars for a user table in a fresh app - Mock up a comment thread with consistent per-user avatars - Seed a demo with avatars that won't look like stock photos - Add a fallback avatar for users who haven't uploaded one ### Examples **Input:** Jane Doe (initials) ``` JD on a hashed teal background ``` *Initials avatar with a background color derived from the seed.* **Input:** alex@example.com (identicon) ``` 5×5 mirrored pixel pattern in two colors ``` *GitHub-style identicon, deterministic per email.* **Input:** Acme Corp (geometric) ``` Gradient tile with a deterministic shape, derived from the seed string ``` *Works for organizations as well as people, where initials would read oddly.* **Input:** user_8823 (identicon), 64px ``` 5×5 mirrored pixel pattern in two hashed colors ``` *Stable per seed, so the same account keeps the same avatar across sessions.* ### FAQ **Is the same seed always the same avatar?** Yes. The seed is hashed and used to drive color and shape choices, so the same input always produces the same avatar — useful for fallback rendering in a production app. **Can I use these in a commercial app?** Yes. The avatars are generated locally and contain no third-party assets. Download the SVG and ship it. **How is this different from Gravatar?** Gravatar looks up a real, user-supplied avatar by email hash. This tool generates a synthetic avatar from any seed — no network call, no per-user data. **What alt text should a generated avatar have?** If the person's name appears next to the avatar, the image is decorative — use alt="" so screen readers don't announce the name twice. If the avatar stands alone, as in a compact activity feed, give it the person's name as alt text. **Should I use the SVG or a PNG?** SVG for anything on the web — it's a few hundred bytes, stays crisp at any size, and scales with the container. Rasterize to PNG only where SVG isn't reliably supported, which in practice means email clients and some PDF pipelines. **Will the initials always be readable on the generated background?** The background color is derived from a hash of the seed, and the foreground is picked to clear the WCAG 3:1 threshold for large text against it. If you override the background manually, check the pair yourself — a mid-tone background is the easy way to end up with unreadable initials. ### References - [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) — MDN Web Docs. Reference for the vector format the generated avatars are emitted in. - [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) — W3C WAI. How to decide what alt text a generated avatar should carry, if any. --- ## Password Generator URL: https://generate.now/password Category: identity Markdown: https://generate.now/password.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: password generator, passphrase generator, strong password, xkcd password, random password, bulk password generator ### Description Two modes: random passwords with configurable length and character classes (upper, lower, digits, symbols), or XKCD-style passphrases built from a wordlist. Generate one or hundreds at a time. Every byte of randomness comes from the Web Crypto API; nothing leaves your browser. ### Use cases - Generate a strong password for a new service - Build a memorable passphrase for a master password - Bulk-generate test passwords for a load test or fixture - Quickly rotate a credential without leaving the browser ### Examples **Input:** 20 chars, all classes ``` T7%dKp9!Lv3@Qx2&Wm8z ``` *Cryptographically random, includes upper, lower, digit, symbol.* **Input:** passphrase, 5 words, hyphen separator ``` stellar-amber-quiet-cobalt-river ``` *Memorable but ~64 bits of entropy.* **Input:** 32 chars, letters and digits only ``` k7Rm2QpXvL9dTyN4wBzH6cJfA3sEuG8r ``` *For systems that silently truncate or reject symbols — still roughly 190 bits.* **Input:** passphrase, 7 words, space separator ``` cobalt lantern quiet meadow bronze drift wren ``` *Around 90 bits of entropy, and typeable on a phone or a TV remote.* ### FAQ **Are these passwords safe to use?** The randomness comes from window.crypto.getRandomValues — the same source recommended for security-sensitive use in the browser. Passwords never leave your device. **Random or passphrase?** Random passwords pack more entropy per character. Passphrases are dramatically easier to remember and type. For a master password you'll type weekly, passphrases win. For a vault entry, random. **How many bits of entropy do I need?** ≥80 bits is comfortably safe for anything not nation-state targeted. The tool shows entropy live so you can size length to your threat model. **Should I still require symbols and mixed case?** NIST SP 800-63B dropped composition rules in its current guidance. They push people toward predictable substitutions — Password1! and its variants — while adding little real entropy. Length plus a blocklist of known-breached passwords does far more, which is why the passphrase mode here defaults to five words. **Do passwords need to be rotated every 90 days?** NIST advises against scheduled rotation. Forced expiry makes people iterate — spring2026, summer2026 — which is easier to guess than the original. Rotate on evidence of compromise instead: a breach notification, a shared credential, or someone leaving the team. **Does anything I generate here leave the browser?** No. Every byte comes from crypto.getRandomValues() in your own browser, and no generated password is sent anywhere, logged, or stored. You can confirm it by generating with the network tab open, or by loading the page and then going offline. ### References - [SP 800-63B: Digital Identity Guidelines](https://pages.nist.gov/800-63-3/sp800-63b.html) — NIST. Current guidance on password length, composition rules, and why rotation requirements backfire. - [Password Storage Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html) — OWASP. How a generated password should be hashed once it reaches your server. - [Crypto.getRandomValues()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues) — MDN Web Docs. The randomness source used, rather than Math.random(). --- ## PIN Generator URL: https://generate.now/pin Category: identity Markdown: https://generate.now/pin.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: pin generator, random pin, 4 digit pin, 6 digit pin, secure pin, numeric password ### Description Generate numeric PINs with optional filters that exclude common weak patterns — sequential digits, repeated digits, palindromes, and the most-leaked codes from password breach data. Bulk generation supported. ### Use cases - Issue a temporary PIN for a hardware device - Pick a PIN that isn't on the top-20 leaked list - Bulk-generate PINs for one-time-use codes - Get a 6-digit PIN that isn't a birthday ### Examples **Input:** 6-digit, exclude weak ``` 739184 ``` *Not sequential, not repeated, not on the leaked-PIN top list.* **Input:** 100 × 4-digit ``` 100 unique PINs, one per line ``` *Useful for one-off codes or load testing.* **Input:** 10 × 4-digit, exclude weak ``` 8317, 4926, 7053, 2694, 9142, 6708, 3571, 8264, 1935, 7420 ``` *None sequential, repeated, or palindromic; all distinct within the batch.* **Input:** 8-digit device pairing code ``` 40719286 ``` *Longer codes suit pairing flows where there's no lockout to lean on.* ### FAQ **How weak is a 4-digit PIN really?** Only 10,000 possibilities, and almost a third of users pick from the same 20 codes (1234, 1111, 0000, etc). For anything user-facing, 6 digits is a meaningful upgrade. **What patterns does 'exclude weak' filter?** Sequential ascending or descending (1234, 9876), all-same digits (0000, 9999), palindromes (1221), keyboard rows, and PINs that appear in the top 1,000 of leaked datasets. **How many digits should a PIN be?** Four digits is 10,000 combinations and six is 1,000,000. Four is only defensible behind a hard attempt limit — three tries then lockout, the way a SIM card works. If an attacker can guess without limit, or the PIN protects anything of value, use six or more. **Can I use these as one-time codes?** Yes, provided each one is single-use and short-lived — five to ten minutes is typical. Don't use them for authenticator-app codes: those are derived from a shared secret and the current time via TOTP, so they have to come from a proper implementation rather than a random number. **Does excluding weak patterns make PINs easier to guess?** It shrinks the keyspace slightly, which sounds bad but isn't. The excluded codes are the ones attackers try first — 1234, 0000, birthdays, repeated pairs — and a handful of them cover a startling share of real-world PINs. Removing them raises the expected number of guesses substantially. **Are PINs unique within a batch?** Yes. Bulk generation de-duplicates within the batch, so a request for 100 four-digit PINs returns 100 distinct values. Since there are only 10,000 four-digit PINs in total, large batches with weak-pattern exclusion on will start to fail — the tool tells you when the request can't be satisfied. ### References - [SP 800-63B: Digital Identity Guidelines](https://pages.nist.gov/800-63-3/sp800-63b.html) — NIST. Guidance on memorized secrets, including minimum entropy for numeric PINs. - [Crypto.getRandomValues()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues) — MDN Web Docs. The cryptographically secure source used to avoid biased digit distribution. --- ## Username Generator URL: https://generate.now/username Category: identity Markdown: https://generate.now/username.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: username generator, ai username, themed username, handle generator, gamer tag generator, social username ### Description Generate a batch of usernames from a description of vibe, length, and style. Claude proposes 10 at a time. Bring your own theme — 'mythology', 'fintech-but-make-it-cute', 'noir film names with numbers' — and get a list you can pick from. ### Use cases - Brainstorm a handle for a new account - Seed a demo with usernames that don't all look like user_1, user_2 - Find a username with a specific vibe for a character or persona - Generate batch usernames for synthetic test users ### Examples **Input:** cyberpunk hacker, short ``` n3onax · void_lex · krash · syn7ax · gh0stwire ``` *Five short handles with cyberpunk flavor.* **Input:** cozy gardener, alliterative ``` mossy.maple · fern.field · willow.weed · poppy.path · sage.snug ``` *Soft, plant-themed alliterative names.* **Input:** botanical, one word, under 10 characters ``` fernwick · mosslet · brambl · sagewood · thistl ``` *Short enough to clear the 15-character limit on X with room to spare.* **Input:** retro arcade, with numbers ``` pixel_84 · neonjoy77 · arcadia_9 · blipzone8 · quarter22 ``` *Numbers are used deliberately rather than appended as a fallback.* ### FAQ **Does it check availability on platforms?** Not yet — that's on the roadmap. For now it generates ideas; check the platform you care about manually. **Can I bias the output toward a specific style?** Yes. The prompt is freeform: 'one word, no numbers' or '4-8 chars, snake_case' work. The more specific, the more useful. **How long can a username be?** It depends entirely on the platform, and the limits are tighter than people expect: 15 characters on X, 30 on Instagram, 39 on GitHub. Generating something 20 characters long and falling in love with it is a good way to waste an afternoon — set the length filter to your target platform first. **Can I use a generated username commercially?** Yes. The output is yours to use, including for a product, a brand account, or a client project. The one thing to check separately is trademark: a handle that reads as an existing company's name can still get you into trouble regardless of where it came from. **Why do some suggestions include numbers or separators?** Because the short, clean, single-word handles were claimed a decade ago. Digits, dots, and underscores are how you get something available that still reads deliberately, rather than the platform's own suggestion of appending four random digits to your first name. **Are the suggestions checked for lookalike characters?** The generator sticks to plain ASCII, which sidesteps the problem. It's worth knowing about if you accept usernames from users, though: Unicode contains characters that render almost identically to Latin ones, and Unicode's UTS #39 covers how to detect them. ### References - [UTS #39: Unicode Security Mechanisms](https://www.unicode.org/reports/tr39/) — Unicode Consortium. Confusable-character guidance relevant to any system that accepts usernames. - [Crypto.getRandomValues()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues) — MDN Web Docs. The randomness source behind the non-AI generation modes. --- ## Fake Email Generator URL: https://generate.now/email Category: identity Markdown: https://generate.now/email.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: fake email generator, test email generator, dummy email, demo email addresses, bulk email generator, qa email ### Description Generate realistic-looking email addresses for use in test data, demo seeds, and form QA. Uses example.com / example.org / test.app and similar reserved domains — guaranteed to never resolve to a real inbox. Optionally mix in plausible-but-fictional company names. ### Use cases - Seed a database with 100 realistic-looking test users - Build a demo screenshot without exposing real customer emails - QA a signup form with addresses that won't bounce to a real inbox - Mock up an admin user list for a product demo ### Examples **Input:** 20 × test users ``` alex.morgan@example.com · sara.lin@test.app · ... ``` *Plausible but guaranteed-fake names + reserved domains.* **Input:** 10 × 'fintech employees' ``` jamie.chen@ledgerlab.example · ravi.patel@northcap.example · ... ``` *Plausible workplace addresses on the .example reserved TLD.* **Input:** 50 × plus-addressed variants ``` alex.morgan+signup@example.com · alex.morgan+billing@example.com · … ``` *Exercises the sub-addressing path, which naive validators reject outright.* **Input:** 6 × role addresses ``` support@example.com · billing@example.com · security@example.org · … ``` *Role accounts rather than people, for testing inbox routing rules.* ### FAQ **Why are the domains always example.com or .example?** RFC 2606 and RFC 6761 reserve example.com / .org / .net / .example and test.* for documentation and testing — they will never resolve to a real mailbox, so no one ever gets a stray test email. **Can these emails actually receive mail?** No — by design. The reserved domains used here are blackholed at the DNS level. Use them for fixtures, screenshots, and form QA, not for anything that needs to receive mail. **Are the generated names of real people?** First and last names are sampled from common census/baby-name datasets and recombined — any resemblance to a real person is coincidental. Don't use these for impersonation. **Which domains are genuinely safe for test data?** RFC 2606 reserves example.com, example.net, and example.org, plus the .test, .example, .invalid, and .localhost top-level domains. RFC 6761 confirms they will never be delegated. Anything else — including domains that merely look fake — might be registered by someone tomorrow, and then your test suite starts emailing a stranger. **Will these pass a strict email validator?** Yes. Every generated address is syntactically valid under RFC 5322, so validation libraries accept it. What will fail is anything doing an MX lookup or a deliverability check, because the reserved domains have no mail servers by design — which is the entire point. **How do I test that my emails actually send?** Not with these. Point your dev environment at a mail-catcher such as Mailpit or MailHog, or use your provider's sandbox mode, and reserve these addresses for seed data, fixtures, and screenshots where nothing should ever be delivered. ### References - [RFC 5322: Internet Message Format](https://datatracker.ietf.org/doc/html/rfc5322) — IETF. The normative grammar for email addresses, which is far looser than most validators assume. - [RFC 2606: Reserved Top Level DNS Names](https://datatracker.ietf.org/doc/html/rfc2606) — IETF. Why example.com and .test are the correct domains for fixture addresses. - [RFC 6761: Special-Use Domain Names](https://datatracker.ietf.org/doc/html/rfc6761) — IETF. The registry of domains guaranteed never to resolve, safe for test data. --- ## QR Code Generator URL: https://generate.now/qr-code Category: media Markdown: https://generate.now/qr-code.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: qr code generator, wifi qr code, vcard qr code, url qr code, svg qr code, qr code maker ### Description Generate QR codes for plain text, URLs, WiFi networks, or vCard contact info. Adjust foreground/background color, size, and error-correction level. Download as scalable SVG or pixel-perfect PNG. Everything runs in the browser — no analytics, no tracking pixel. ### Use cases - Generate a QR code for a landing page URL on a print flyer - Share WiFi credentials with a guest without typing the password - Add a vCard QR to a business card or email signature - Drop a tracking-free QR into a slide deck or PDF ### Examples **Input:** https://generate.now ``` Scannable QR code, SVG download ``` *Smallest form factor for a short URL.* **Input:** WiFi: ssid=Cafe5G, password=hunter2, WPA2 ``` QR that auto-joins the network on iOS/Android ``` *Encoded as WIFI:T:WPA;S:Cafe5G;P:hunter2;;* **Input:** vCard for a business card ``` QR containing name, title, phone, email, and URL ``` *Scanning it offers to create a contact rather than opening a browser.* **Input:** mailto: with a prefilled subject ``` mailto:hello@example.com?subject=Hello ``` *Any URI scheme works — mailto, tel, sms, geo — not just https.* ### FAQ **What's error correction and which level should I pick?** Error correction (L/M/Q/H) makes a QR scannable even if part of it is damaged or covered. L = 7% recovery, H = 30%. Higher correction = denser code. Use M for screen, H if you're placing a logo over the center. **Can I put a logo in the middle?** Yes, manually — overlay your logo (up to ~25% of the area) on a code generated with error correction H, then re-test the scan on a real phone before printing. **Are these QR codes tracked?** No. The code is generated locally and points directly at whatever URL you input — there's no redirect, no analytics hop. **How much data fits in one QR code?** At the largest size (version 40) with the lowest error correction, a QR code holds 7,089 numeric characters, 4,296 alphanumeric, or 2,953 bytes. Practical limits are much lower: the more data you encode, the denser the modules, and the harder it is for a phone to read at an angle or in poor light. **What size should I print a QR code?** The usual rule is one tenth of the scanning distance — a code read from a metre away wants to be about 10cm across. Add a quiet zone of at least four modules of blank space on every side, or scanners will struggle to find the code's edges. **Should I download the SVG or the PNG?** SVG for print and anywhere the size might change — it stays sharp at any scale and the file is tiny. PNG for fixed-size raster contexts like a slide deck or an email. Never resize a PNG QR code up; the soft edges are exactly what breaks scanning. ### References - [ISO/IEC 18004:2024](https://www.iso.org/standard/83389.html) — ISO. The current international standard defining QR code symbology and error correction. - [QR code](https://en.wikipedia.org/wiki/QR_code) — Wikipedia. Version sizes, data capacity, and what each error-correction level actually recovers. --- ## Favicon Generator URL: https://generate.now/favicon Category: media Markdown: https://generate.now/favicon.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: favicon generator, favicon from text, apple touch icon, favicon bundle, site manifest generator, pwa icon generator ### Description Type initials with a background color, or upload an image. Get back a zip with all the favicon sizes modern browsers and OSes ask for (16, 32, 48, 180 for iOS, 192/512 for Android, plus manifest.webmanifest) and the HTML snippet to paste into your . ### Use cases - Ship a sensible favicon for a side project in 30 seconds - Replace a default Next.js favicon with branded initials - Generate the full bundle of icons a modern PWA needs - Get the matching snippet without remembering all six tag names ### Examples **Input:** Text: GN, dark background, green letters ``` favicon.ico + 6 PNGs + manifest.webmanifest + HTML snippet ``` *Initials favicon with a coherent set of sizes.* **Input:** Upload a 512×512 PNG logo ``` favicon.ico + 16/32/48/180/192/512 PNGs + manifest.webmanifest + snippet ``` *Every size a current browser or OS asks for, from one source image.* **Input:** Text: AP, light background, dark letters ``` Initials favicon rendered at all sizes, with the 16×16 checked for legibility ``` *The two-letter route, for projects without a logo yet.* **Input:** Emoji source: ⚡ ``` Rasterized emoji favicon at each required size ``` *Quick and distinctive for a side project — renders identically everywhere, unlike an inline SVG emoji.* ### FAQ **Why do I need so many sizes?** Different browsers, OSes, and PWA install flows look for different sizes. Shipping the full set avoids low-res rendering on retina/install screens. **Is .ico still needed?** Yes — legacy IE/Edge and some crawlers still request /favicon.ico. The bundle includes one alongside the modern PNGs. **Where does the manifest.webmanifest go?** At the root of your site, next to the favicons. The generated HTML snippet links it. It enables 'install to home screen' on supported devices. **What should the source image be?** A square PNG or SVG at 512×512 or larger. Anything smaller gets upscaled for the Android and PWA sizes and looks soft. Favicons are rendered at 16×16 more often than any other size, so test that one first — fine detail and thin strokes vanish completely. **Why hasn't my favicon updated?** Browsers cache favicons far more aggressively than other assets, and a normal hard reload often doesn't clear them. The reliable fix is to change the filename — favicon-v2.ico — or add a query string to the link tag, so the browser treats it as a new resource. **Do I still need apple-touch-icon?** Yes, if you care how the site looks when someone adds it to an iOS home screen. iOS uses a 180×180 PNG and ignores the manifest icons for that particular case. It's included in the generated bundle along with the matching link tag. ### References - [Link types: icon](https://html.spec.whatwg.org/multipage/links.html#rel-icon) — WHATWG. The normative definition of rel=icon, including sizes and type attributes. - [Web Application Manifest](https://www.w3.org/TR/appmanifest/) — W3C. How the icons array is consumed for installed and home-screen contexts. - [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) — MDN Web Docs. Practical reference for the markup this tool emits. --- ## Hash Generator URL: https://generate.now/hash Category: auth Markdown: https://generate.now/hash.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: hash generator, md5 hash, sha-256 hash, sha-512 hash, bcrypt generator, online hash ### Description Hash arbitrary input with the most common algorithms. SHA family uses the Web Crypto API; MD5 uses spark-md5; bcrypt uses bcryptjs with configurable cost. Everything runs in the browser. Compare-mode shows two inputs side by side to verify a match. ### Use cases - Verify a download checksum against an SHA-256 hash - Generate a bcrypt hash for seeding a test user - Get the SHA-1 of a string for cache busting or ETag generation - Compare two hashes without copy-pasting them into a diff tool ### Examples **Input:** hello world (sha-256) ``` b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9 ``` *Canonical SHA-256 of the classic test string.* **Input:** hunter2 (bcrypt, cost 10) ``` $2a$10$N9qo8uLOickgx2ZMRZoMye... ``` *Bcrypt hash with a fresh salt — re-run produces a different hash.* **Input:** (empty string), SHA-256 ``` e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 ``` *A useful constant to recognise — it means you hashed nothing by mistake.* **Input:** abc, SHA-256 ``` ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad ``` *The test vector published with FIPS 180-4, handy for checking an implementation.* ### FAQ **When should I use bcrypt vs SHA-256?** Use bcrypt (or argon2) for passwords — it's deliberately slow and salts each hash to resist brute force. Use SHA-256 for checksums, signatures, and deduplication where speed matters. **Is MD5 broken?** For collision resistance, yes — don't use MD5 for signatures. For non-security uses (cache keys, ETags, file fingerprints) it's fine and faster than SHA. **Does my input leave the browser?** No. All hashing uses Web Crypto or in-browser libraries (spark-md5, bcryptjs). Inputs never hit a server. **What's a salt, and does this tool add one?** A salt is random data mixed into the input so that identical passwords produce different hashes, which defeats precomputed rainbow tables. bcrypt generates a salt automatically and stores it inside the output string — that's why re-hashing the same password gives a different result each time. The SHA algorithms have no salt at all. **How do I verify a downloaded file's checksum?** Hash the file with the algorithm the publisher used — usually SHA-256 — and compare the result against the value they published. Use compare mode to check the two strings rather than eyeballing 64 hex characters, which is exactly the kind of comparison human beings are bad at. **What bcrypt cost factor should I use?** Pick the highest value your hardware can absorb while keeping login under about 250ms — in practice 10 to 12 on current servers. Each increment doubles the work. The cost is stored in the hash itself, so you can raise it later and re-hash users as they log in. ### References - [FIPS 180-4: Secure Hash Standard](https://csrc.nist.gov/pubs/fips/180-4/upd1/final) — NIST. The specification defining SHA-1, SHA-256, SHA-384, and SHA-512. - [SubtleCrypto.digest()](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest) — MDN Web Docs. The browser API used to compute every digest locally. - [Password Storage Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html) — OWASP. Why a general-purpose hash is the wrong choice for storing passwords. --- ## Slug Generator URL: https://generate.now/slug Category: text Markdown: https://generate.now/slug.md AI-powered: no Price: free, no account required Last updated: 2026-08-27 Keywords: slug generator, url slug generator, slugify, title to slug, transliterate slug, seo slug ### Description Turn a title or arbitrary string into a clean URL slug. Configure separator (- or _), case, max length, and Unicode handling. Accented characters are transliterated to ASCII; emoji and unsafe characters are stripped. Runs locally. ### Use cases - Convert a blog post title into a SEO-friendly URL slug - Bulk-slugify a list of product names - Sanitize a user-supplied filename for use as a URL - Strip emoji and diacritics from a title for filesystem use ### Examples **Input:** 10 Things I Wish I Knew About OKLCH ``` 10-things-i-wish-i-knew-about-oklch ``` *Lowercased, spaces become hyphens.* **Input:** Café Olé — naïve résumé ``` cafe-ole-naive-resume ``` *Accented characters transliterated, punctuation stripped.* **Input:** Ürün Açıklaması Sayfası ``` urun-aciklamasi-sayfasi ``` *Turkish diacritics transliterated to their closest ASCII equivalents.* **Input:** Multiple spaces & symbols!! ``` multiple-spaces-symbols ``` *Runs of whitespace collapse to one separator; punctuation is dropped, not encoded.* ### FAQ **Are emojis stripped or transliterated?** Stripped. Emoji don't translate cleanly to ASCII. If you need them encoded, use a URL encoder instead. **What's the difference between - and _ separators?** Google has long treated hyphens as word breaks and underscores as joiners. For SEO-facing URLs, hyphens are the safer default. **How long should a slug be?** Aim for under 60 characters where you can. The tool truncates at word boundaries when you set a max-length so you don't end up with a chopped final word. **What happens if I change a slug after publishing?** Every existing link breaks, including the ones search engines have indexed and the ones other people have shared. If you have to change it, serve a 301 redirect from the old slug to the new one and keep that redirect indefinitely — it passes ranking signals across and stops the old URL 404ing. **Should slugs be lowercase?** Yes. Path segments are case-sensitive under RFC 3986, so /My-Post and /my-post are two different URLs as far as the spec is concerned. Some servers normalise and some don't, which is how you end up with the same page indexed twice. **How long should a slug be?** Three to five meaningful words is the sweet spot. Longer slugs get truncated in search results and are awkward to share verbally; shorter ones stop describing the page. Drop stop words — how-to-generate-a-slug beats how-to-generate-a-slug-in-your-application. ### References - [RFC 3986: URI Generic Syntax](https://datatracker.ietf.org/doc/html/rfc3986) — IETF. Which characters are legal unescaped in a path segment. - [UAX #15: Unicode Normalization Forms](https://www.unicode.org/reports/tr15/) — Unicode Consortium. The NFD normalisation step behind accent stripping and transliteration. - [URL structure best practices](https://developers.google.com/search/docs/crawling-indexing/url-structure) — Google. Google's guidance on readable, hyphen-separated URLs. --- ## Meta Tags Generator URL: https://generate.now/meta-tags Category: web Markdown: https://generate.now/meta-tags.md AI-powered: yes Price: free, no account required Last updated: 2026-08-27 Keywords: meta tags generator, open graph generator, twitter card generator, seo meta tags, og image meta, social preview tags ### Description Build the meta tag block for a page: title, description, canonical, OG tags (title, description, image, type, url), Twitter card, robots, and language. Fill the inputs manually, or describe the page and let Claude suggest title and description for you. ### Use cases - Add the right social preview tags to a marketing page - Generate the full meta block for a new blog post - Get an AI-suggested title and description from a one-line page brief - Sanity-check that title length, description length, and OG image are all set ### Examples **Input:** title: 'How OKLCH replaces HSL', description: 'A practical migration guide.', image: og.png ``` How OKLCH replaces HSL\n\n ``` *Full meta block ready to paste into .* **Input:** AI mode: 'pricing page for a developer tool, friendly tone' ``` Suggested title (~58 chars) + description (~155 chars) + OG variants ``` *Claude proposes copy; you tweak before copying.* **Input:** Staging page that shouldn't be indexed ``` ``` *Blocks indexing at the page level — note that robots.txt alone won't do this.* **Input:** Blog post with article metadata ``` ``` *The article type unlocks author and publish-date fields in some previews.* ### FAQ **What's the ideal title and description length?** Titles: 50–60 chars (Google truncates around 580px wide). Descriptions: 140–160 chars. The tool flags entries outside these ranges. **Do I need both OG and Twitter Card tags?** Twitter (X) reads OG tags as a fallback, so a minimal OG block usually covers both. If you want Twitter-specific behavior (large image card, summary card variant), the dedicated twitter:* tags are still useful. **Where do these tags go?** All inside the of your HTML, ideally before any