Kebab Case Converter
Convert text, snake_case, or camelCase to kebab-case instantly.
How to use this tool
- Enter text in the fields above.
- Results update instantly as you type — or click Calculate.
- Read your kebab-case and the full breakdown beneath it.
Convert text, snake_case, or camelCase to kebab-case instantly.
How it works
Kebab case is a naming convention where words are written in all lowercase and separated by hyphens, like my-variable-name or get-user-profile. It is the standard format for CSS class names, HTML attributes, URL slugs, and many command-line flag names.
This converter accepts plain text phrases, snake_case identifiers, camelCase strings, and PascalCase identifiers. It splits on spaces, underscores, and camelCase word boundaries, lowercases every segment, and joins them with hyphens.
Paste or type your input into the field and the kebab-case result appears instantly. Use it when naming CSS classes from a design spec written in plain English, generating URL slugs from article titles, or converting code identifiers when switching between naming conventions.
Because hyphens are valid in CSS and URLs but not in most programming language identifiers (where they would be interpreted as minus signs), kebab case is specific to markup, styling, and routing contexts.
Worked example
Generate a URL slug from an article title
- Paste: 'How to Build a REST API in Python'
- Words are split on spaces and lowercased.
- Joined with hyphens.
- Output: 'how-to-build-a-rest-api-in-python'
how-to-build-a-rest-api-in-python -- ready to use as a URL slug.
Common mistakes to avoid
- Using kebab-case identifiers as JavaScript variable names -- hyphens are operators in JS, causing syntax errors.
- Forgetting that punctuation may be stripped -- apostrophes in titles like 'What's New' produce 'whats-new', losing the apostrophe.
- Expecting uppercase letters to be preserved -- kebab case is always all-lowercase by convention.
Key terms
- Kebab case
- A naming style using all-lowercase words connected by hyphens, e.g. background-color or my-component.
- URL slug
- The human-readable part of a URL, typically kebab-cased to be browser-friendly and SEO-readable.
- CSS class
- A reusable style identifier in HTML/CSS, conventionally written in kebab case.
Frequently asked questions
- What is kebab-case used for?
- Kebab-case is commonly used for CSS class names, URL slugs, and HTML attributes.