Phrasit

Search Phrasit

Search every tool, guide, and citation page.

3,600 US SEARCHES / MONTH

Text to kebab-case converter

Convert any phrase or sentence into kebab-case. Developers, SEO writers, and content teams use a kebab-case converter to turn titles, labels, and sentences into lowercase hyphenated strings for URL slugs, CSS class names, file names, and command-line flags. It produces clean, web-safe names in one paste.

Example

Input to output
Input

My First Blog Post

Output

my-first-blog-post

Text to kebab-case conversion splits the input into words, lowercases every letter, and joins the words with hyphens. Use it for URL slugs, CSS class names, file names, and CLI flags. For example, My First Blog Post becomes my-first-blog-post.

0 characters

Text to kebab-case guide

What kebab-case is and why the web loves it

kebab-case writes a multi-word name in all lowercase and joins the words with hyphens: my-first-blog-post, main-nav-link, user-profile-image. The name comes from the words looking like pieces of food skewered on a kebab. It is sometimes called dash-case, hyphen-case, or, when used for web addresses, slug-case. Because it reads cleanly and avoids underscores, it has become the default for anything that appears in a browser address bar or a stylesheet.

kebab-case is the convention for URL slugs, which is its single most important use: search engines and humans both read example.com/my-first-blog-post far more easily than a camelCase or underscore alternative, and Google has long recommended hyphens over underscores in URLs. It is also the convention for CSS class names and custom properties, HTML attribute names, npm package names, command-line flags such as --dry-run, and Kubernetes resource names. Kebab-case cannot be used directly as a JavaScript identifier because the hyphen reads as a minus sign, which is exactly why you convert in and out of it.

How the converter builds a kebab-case string

The conversion runs in two stages. First the input is split into words at every boundary: spaces, existing hyphens or underscores, dots, and the capital letters inside a camelCase or PascalCase identifier. That lets you paste a plain headline, a sentence, or an existing code name and get a sensible word split. Second, each word is lowercased and the words are joined with a single hyphen.

So "My First Blog Post" becomes my-first-blog-post, "userProfileImage" becomes user-profile-image, and "max_retry_count" becomes max-retry-count. Leading and trailing spaces are trimmed and runs of separators collapse to one hyphen, so you never get a double dash. For URL slugs specifically, you may also want to strip punctuation such as apostrophes and question marks after conversion, since those are best avoided in addresses; the converter leaves in-word punctuation intact so you can decide.

As with the other code conventions, acronyms and numbers deserve a glance. "Get API Token" becomes get-api-token, which is usually right, but a title with a stray ampersand or em dash should be cleaned before it becomes a slug. The tool gives you a clean lowercase hyphenated base; the final polish for a public URL is yours.

When you reach for a kebab-case converter

The most frequent use is turning a blog or page title into a URL slug. You write "10 Tips for Faster Page Loads" and need 10-tips-for-faster-page-loads for the address. Pasting the title and copying the slug is faster than typing the hyphens by hand, and it keeps your URLs consistent across a whole site, which helps both readers and search ranking.

Front-end work is the other big driver. CSS class names, BEM modifiers, data attributes, and design-token names are all kebab-case, so converting a design label like "Primary button hover" into primary-button-hover saves time and avoids inconsistent naming across a stylesheet. File names for assets, components, and documentation pages also commonly use kebab-case to stay portable across operating systems.

Paste your title, label, or identifier into the live converter above to get the kebab-case form immediately. The side panel shows camelCase and snake_case alongside it, so if the same words also need to become a JavaScript variable or a database column you can grab those in the same pass.