Accidentally typed your text in the wrong case?
Simply drop your text below to quickly convert it into uppercase, lowercase, title case, sentence case, and other text formats using our free online case converter.
What is a kebab-case converter?
A kebab-case converter transforms text into hyphen-separated lowercase — the naming format used for CSS classes, HTML attributes, URL slugs, and NPM packages. It strips spaces and other separators, replaces them with hyphens, and lowercases every letter.
Before & After
Before
Background Color
After
background-color
Before
myComponentName
After
my-component-name
Before
user_profile_page
After
user-profile-page
Where kebab-case is used
CSS class names
Every CSS property (background-color, font-size, border-radius) and class name convention uses kebab-case.
URL slugs & paths
Google recommends hyphens in URLs for SEO — /my-blog-post ranks better than /my_blog_post.
HTML data attributes
data-user-id, data-component-name — all HTML data attributes follow kebab-case.
NPM package names
All NPM packages use kebab-case: react-router-dom, tailwind-css, next-auth.
Web framework routing
Next.js, Nuxt, SvelteKit, and Astro all use kebab-case for file-based routing conventions.
Frequently asked questions
What is kebab-case?
kebab-case (also called dash-case or hyphen-case) is a naming convention where all letters are lowercase and words are separated by hyphens. Example: "background color" becomes "background-color". The name comes from words being skewered together like a kebab.
When should I use kebab-case?
kebab-case is standard for: CSS class names and custom properties, HTML data attributes (data-user-id), URL slugs and path segments, file names for web assets, NPM package names, and Tailwind CSS utility classes.
What is the difference between kebab-case and snake_case?
Both use all lowercase letters, but kebab-case separates words with hyphens (-) and snake_case uses underscores (_). CSS uses kebab-case; Python and SQL use snake_case. URLs typically use kebab-case as hyphens are treated as word separators by search engines.
Is kebab-case good for SEO URLs?
Yes — Google explicitly recommends using hyphens to separate words in URLs rather than underscores. "my-blog-post" is parsed as three separate words by Google; "my_blog_post" is treated as one word, hurting keyword relevance.
Why does CSS use kebab-case?
CSS was designed before other naming conventions were standardised, and hyphens were chosen as separators since underscores had inconsistent browser support in early CSS. The convention stuck and is now the standard for all CSS properties and class names.
Can I convert camelCase or snake_case to kebab-case?
Yes. Paste camelCase, snake_case, Title Case, or plain text — the converter strips all separators and outputs clean kebab-case.
Related tools