HTML Outline Extractor - Online Heading Map from URL
Enter a URL and see a nested list of all h1‑h6 tags. Check document structure for SEO and accessibility.
UD5 Toolkit
Extract & visualize heading structure from any webpage or HTML code. Audit your SEO heading hierarchy in seconds.
Enter a URL and see a nested list of all h1‑h6 tags. Check document structure for SEO and accessibility.
Set column‑count, gap, and rule, and see a multi‑column text layout. Copy the minimal CSS. For magazine designs.
Create a multi‑column text layout with adjustable column count, gap, and rule. Copy the CSS. Elegant reading experience.
Build a complete font‑stack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
Create a pure HTML/CSS accordion using <details> elements. Add custom styling and get the clean code. No JavaScript required.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Write a standard README with pre‑filled sections like Installation, Usage, and License. Export as Markdown. Save time.
Convert title to URL slug with options: ignore stop words, transliterate special characters, choose separator. SEO friendly.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Write global CSS and auto‑generate unique, scoped class names with source maps. Understand CSS Modules naming.
Create all kinds of CSS‑only triangles (up, down, left, right, equilateral). Adjust color and size. Grab the code.
Type text and instantly see it rendered with text‑transform: uppercase, lowercase, capitalize, and full‑width. Copy CSS.
Generate CSS-only triangles by configuring direction, size, and color. Copy the CSS snippet. Useful for creating speech bubbles and navigation arrows.
Pick an emoji and get the exact CSS content property value with escaped Unicode. For inserting emojis via CSS.
Paste or upload an SVG and convert it into a CSS background‑image data URI. Clean and ready to embed.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Paste Jira/Confluence wiki markup and get a rendered HTML preview. Supports headings, lists, links, and code blocks. All local.
Create custom flat or plastic badges for your GitHub README. Choose label, message, color, and export as Markdown, HTML, or SVG.
Write scoped CSS rules that apply only within a subtree. See the boundary limits and avoid naming conflicts. New browser feature.
Drag points to create a custom clip‑path shape. See the CSS value update live. For creating non‑rectangular elements.
Take a bloated inline SVG and clean it: remove unnecessary attributes, apply CSS shorthand. Smaller markup. Pure parser.
Create a Svelte single‑file component with script, style, and markup. Choose TypeScript or JavaScript. Copy the .svelte file.
Offline‑first search of the CanIUse database. Type a CSS property, HTML element, or API and see global support percentages. Fast.
Build a group of `<details>` elements where opening one closes others. Optional JavaScript. Copy the accessible snippet.
Design a modern button with gradients, shadows, and hover effects. Copy the clean CSS code.
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.
Paste Pug template code and compile it to HTML. See the rendered output instantly. For static site devs.
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.