kebab-case Converter
Convert text to kebab-case instantly. Perfect for CSS class names, URL slugs, HTML attributes, and file names.
What Is kebab-case?
kebab-case is a naming convention where all letters are lowercase and spaces between words are replaced by hyphens. The phrase “user profile picture” becomes user-profile-picture. The name is a lighthearted reference to words skewered together on a stick, like pieces of food on a kebab skewer.
kebab-case is the natural format for web contexts: URLs, CSS, and HTML all treat hyphens as safe, readable separators. It is also widely used for file names in projects where consistency and cross-platform compatibility matter.
Where kebab-case Is Used
CSS Class Names and IDs
kebab-case is the overwhelming convention for CSS class names and IDs. The official CSS specification itself uses kebab-case for all named values and properties: font-size, background-color, border-radius, flex-direction. By following the same convention in your own class names, your stylesheet stays visually consistent and easy to read:
.nav-bar,.hero-section,.product-card.btn-primary,.form-input-error#main-content,#sidebar-nav
CSS custom property names also conventionally use kebab-case: --color-primary, --font-size-base, --spacing-md.
HTML Attributes and Data Attributes
HTML attributes are case-insensitive, but the convention is to write them in lowercase. Custom data-* attributes in particular use kebab-case: data-user-id, data-product-sku, data-modal-target. In JavaScript, these map to the dataset API using camelCase automatically, so data-user-id is accessed as element.dataset.userId.
URL Slugs
Google's own URL guidelines recommend using hyphens as word separators in URL paths, not underscores or spaces. Search engines treat hyphens as word boundaries, so /how-to-write-a-cover-letter is indexed as five separate words, while /how_to_write_a_cover_letter may be treated as one long word by some crawlers. This makes kebab-case slugs better for SEO and more readable when shared as plain text in emails or messages.
- Blog post:
/blog/how-to-build-a-rest-api - Product page:
/products/wireless-noise-cancelling-headphones - Category:
/docs/getting-started
File Names in Web Projects
Many frontend projects and static site generators use kebab-case for file names. This is particularly common in Hugo, Jekyll, Eleventy, and Next.js projects where the file name often becomes the URL slug directly. Using kebab-case everywhere — component files, page files, image assets — keeps the project directory consistent and avoids issues when deploying to Linux servers where file names are case-sensitive.
- Page files:
about-us.tsx,privacy-policy.tsx - Image assets:
hero-background.webp,team-photo.jpg - CSS modules:
product-card.module.css
CLI Options and Configuration Keys
Command-line tools almost universally use kebab-case for flags and options: --output-dir, --max-retries, --dry-run. Many configuration file formats such as.eslintrc, GitHub Actions YAML, and Docker Compose also use kebab-case for key names.
kebab-case vs. snake_case: Which Should You Use?
The choice comes down to context. Use kebab-case for anything that lives in a web browser or a URL — CSS classes, HTML attributes, URL slugs, and frontend file names. Use snake_case for anything that lives in server-side code where hyphens would be interpreted as subtraction operators — Python variables, database columns, and Rust function names. When in doubt, match the convention already established in the project you are working in.
How to Use This kebab-case Converter
Paste any text — plain English phrases, camelCase or PascalCase identifiers, snake_case strings, or natural language sentences — into the input box. The converter lowercases all letters and joins words with hyphens. Copy the result with one click.