Kebab Case Converter — Free Online Tool
What is Kebab Case Converter?
Kebab Case (kebab-case) is a naming convention that joins words with hyphens and converts all letters to lowercase. The result looks like this-is-kebab-case — words are strung together with dashes, resembling ingredients on a kebab skewer.
It is the standard naming format for CSS class names, URL slugs, HTML id and data attributes, and file names in many web frameworks. This tool converts any input — plain text, camelCase, snake_case, or PascalCase — into clean, URL-safe kebab-case output that you can use immediately.
When to use Kebab Case Converter?
Use kebab-case for CSS class names and BEM-style selectors, URL slugs for blog posts and product pages, HTML data attributes, and configuration keys in YAML files. , backgroundColor → background-color) use this tool regularly. SEO professionals generating clean URL slugs will find it helpful — search engines treat hyphens as word separators, making kebab-case naturally SEO-friendly.
For URL slug generation with additional sanitisation, try the URL Slug Generator. For Python or database naming, use the Snake Case Converter.
How to use this tool
- 1Enter your text or phrase
- 2Click 'Convert' to get kebab-case
- 3Copy your URL-friendly slug
The tool strips special characters, lowercases everything, and replaces spaces, underscores, dots, and camelCase boundaries with hyphens. The result is always a clean, lowercase, hyphen-separated string.
Examples
| Input | Output |
|---|---|
| Hello World | hello-world |
| backgroundColor | background-color |
| my_variable_name | my-variable-name |
| The Quick Brown Fox | the-quick-brown-fox |
| user_id_column | user-id-column |
Rules & Behavior
- All words are converted to lowercase. Regardless of the input format — UPPERCASE, Title Case, camelCase — every letter in the output will be a small letter.
- Words are separated by hyphens (-). Spaces, underscores, dots, and camelCase letter transitions are all replaced with single hyphens to produce clean kebab-case.
- Special characters and punctuation are removed. Only letters (a–z), numbers (0–9), and hyphens remain, making the output safe for use in URLs, CSS selectors, and HTML attributes.
Related Tools
Frequently Asked Questions
What is kebab-case?
kebab-case is a naming convention where words are all lowercase and separated by hyphens, like my-component-name. It resembles ingredients threaded on a kebab skewer. It is the standard for CSS class names, HTML attributes, URL paths, and file names in many web frameworks including Angular and Ember.
When is kebab-case used?
CSS class names (.nav-bar, .btn-primary), HTML id attributes, URL slugs (/blog/my-post-title), Lisp and Clojure identifiers, Angular component selectors, and YAML configuration keys all use kebab-case. It is also the default for npm package names and many CLI command names.
Is kebab-case the same as spinal-case or lisp-case?
Yes, they are identical — all lowercase words separated by hyphens. The name varies by community: web developers say 'kebab-case', Lisp programmers say 'lisp-case', and some call it 'spinal-case'. Our tool produces the same output regardless of what you call it.
Why is kebab-case good for URLs?
Search engines like Google treat hyphens as word separators, so kebab-case URLs (e.g., /best-free-tools) are properly indexed as separate keywords. Underscores in snake_case URLs are treated as word joiners, making hyphens the better choice for SEO-friendly URL slugs.
Can I convert PascalCase to kebab-case?
Yes. The tool detects uppercase letter transitions in PascalCase and camelCase input and inserts hyphens at each boundary. For example, 'MyComponentName' becomes 'my-component-name' and 'backgroundColor' becomes 'background-color'.