kebab-case Converter: CSS & URL Formatting Tool
Transform any text into clean kebab-case format instantly. Whether you're naming CSS classes, creating URL slugs, or formatting HTML IDs, our tool automatically converts your text into proper kebab-case formatting while following web development best practices.
Converts any text to valid kebab-case in real time — paste a component name, page title, or variable in any format and get a lowercase, hyphen-separated string ready for CSS or URLs.
Produces URL-safe output by default: no spaces, no special characters, no encoding required — the result can be dropped directly into an href, a file path, or a route definition.
Accepts input in any format — camelCase, snake_case, Title Case, or free text — and normalizes all of them to consistent kebab-case without requiring pre-cleaned input.
Strips characters that are illegal in CSS class names and HTML IDs (brackets, slashes, ampersands) so the output passes CSS validators and browser ID lookups without modification.
Handles acronyms by treating them as lowercase words, matching the behavior of major CSS frameworks like Tailwind and BEM, which avoid all-caps class name segments.
Runs entirely in the browser with no rate limits, suitable for converting a full list of component names or route paths in a single session.
How to Use
Enter your text or class name
Preview your kebab-case result
Copy web-ready text
Web Development
- CSS class names
- HTML IDs
- File names
- Component names
URL Structure
- Page slugs
- Resource paths
- SEO-friendly URLs
- Directory names
Project Organization
- Repository names
- Package names
- Asset files
- Documentation
| Original Text | Result |
|---|---|
Main Header | main-header |
user_profile_image | user-profile-image |
Contact Form | contact-form |
Web Technologies
- CSS
- HTML
- Vue.js
- Static Sites
Build Tools
- Webpack
- Vite
- Gulp
- npm
When naming CSS classes in a BEM or utility-first architecture, convert your component names here before writing any selectors — a consistent kebab-case baseline prevents the mixed-convention accumulation that makes large stylesheets hard to search.
For Next.js, Nuxt, or Astro file-based routing, page file names should match the kebab-case slug you want in the URL — convert your page titles here to get the correct filename before creating the file.
npm package names must be kebab-case and all-lowercase by registry convention; use this tool when naming a new package to avoid publish errors from uppercase letters or underscores.
In Vue and Svelte, custom component file names are conventionally PascalCase but their HTML tag usage is kebab-case — convert your PascalCase component name here to get the correct kebab-case tag you'll use in templates.
For GitHub repository names and Docker image tags, kebab-case is the widely accepted convention; using it avoids the awkward URL-encoding that spaces and underscores sometimes trigger in different tools.
Keep kebab-case slugs short and descriptive — URL paths like /blog/how-to-use-git-rebase are readable by both humans and search engines, while /blog/htugrebase trades a few characters for complete unintelligibility.
Avoid consecutive hyphens in CSS class names and URLs — they can confuse both CSS parsers and URL normalizers, and they signal sloppy conversion from inputs with multiple adjacent separators.
Match your file system naming convention to your URL convention — if your routes are kebab-case slugs, your page component files should follow the same pattern so that directory listings and route configs remain in sync.
For npm packages, check the registry for existing packages with your chosen kebab-case name before publishing — the registry is case-insensitive for lookup but preserves original casing, so similar names can cause confusion.
In Tailwind CSS, custom utility class names in your config must be kebab-case to match Tailwind's own conventions; mixing snake_case or camelCase custom utilities with Tailwind's built-ins creates inconsistent autocomplete behavior in most editors.
Frequently Asked Questions
Find answers to common questions about our tools and services.
Understanding kebab-case
kebab-case gets its name from the visual image of words skewered together by hyphens, like ingredients on a kebab skewer. It emerged as the dominant naming convention for web URLs and CSS class names in the early 2000s, driven partly by Tim Berners-Lee's URL design notes which recommended lowercase hyphen-separated words for readability. The CSS specification has allowed hyphens in identifiers since CSS1, and the convention was reinforced by OOCSS and BEM methodologies that became widespread around 2010.
The most common daily use is writing CSS class names and Tailwind utility overrides. When a designer hands off a component with names like 'Primary Action Button' or 'Card Header Image', those labels need to become valid CSS selectors. Paste the label list here, convert to kebab-case, and paste directly into your stylesheet or JSX className prop. The conversion also catches edge cases like accidental camelCase from a copied variable name that would otherwise create a class that only works with quoted selectors.
A second high-frequency use is URL slug generation. Blog post titles, product names, and documentation page headings need to become clean URL paths. A title like 'Getting Started with Next.js 14 & App Router' needs to become 'getting-started-with-nextjs-14-app-router' — with special characters stripped and hyphens normalized. This matters for SEO: Google's crawler treats hyphens as word separators, so a well-formed kebab-case slug contributes to keyword matching for every word in the title.
Without a converter, developers typically use a one-liner: title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''). This works for simple ASCII inputs but fails silently on accented characters (é, ü, ñ), em-dashes, and smart quotes copied from word processors. It also doesn't normalize runs of hyphens from consecutive non-alphanumeric characters. This tool handles those edge cases consistently.
kebab-case is required or strongly conventional in: CSS class names and IDs (universal), HTML custom element tag names (spec-mandated — must contain a hyphen), URL slugs for SEO-optimized paths, npm package names (registry convention), Vue and Svelte component tag usage in templates, HTTP header names (Content-Type, Authorization, X-Request-Id), and file names in most static site generators including Jekyll, Hugo, and Eleventy. It is invalid in JavaScript variable declarations and Python identifiers, where hyphens are parsed as subtraction.