Free Toolkit

kebab-case ConverterConvert text to kebab-case for CSS classes, URLs, and file names.

kebab-case Converter illustration
📝

kebab-case Converter

Convert text to kebab-case for CSS classes, URLs, and file names.

How to Use
1

Enter Text

Type or paste text to convert to kebab-case.

2

View Result

See lowercase hyphenated output instantly.

3

Copy & Use

Copy for CSS classes, URLs, or file names.

What Is kebab-case Converter?

A kebab-case converter transforms text into kebab-case format, where all letters are lowercase and words are separated by hyphens. kebab-case is the standard naming convention for CSS class names, HTML attributes, URL slugs, npm package names, and file names in many frameworks. Examples: "Hello World" becomes "hello-world", "backgroundColor" becomes "background-color". The name comes from the visual resemblance of words skewered on a hyphen, like items on a kebab stick.

Why Use Our kebab-case Converter?

  • Standard for CSS class names and custom properties
  • Required format for URL slugs in most web frameworks
  • Used for npm package names and Git branch names
  • Most readable format for multi-word identifiers in web contexts
  • Handles conversion from any input format

Common Use Cases

CSS Classes

Format class names following BEM or standard CSS naming conventions.

URL Slugs

Create SEO-friendly URL paths from page titles or content headings.

npm Packages

Format package names following npm's kebab-case convention.

File Naming

Name files in kebab-case for Angular, Vue, and other component-based frameworks.

Technical Guide

kebab-case conversion follows the same word-splitting algorithm as snake_case but joins words with hyphens instead of underscores. Input is split on whitespace, underscores, dots, existing hyphens, and case transitions. All words are converted to lowercase and joined with single hyphens. Consecutive hyphens are collapsed, and leading/trailing hyphens are removed. The algorithm correctly handles camelCase input ("backgroundColor" → "background-color"), PascalCase ("PageTitle" → "page-title"), and mixed formats. Note that kebab-case identifiers cannot be used directly as variable names in most programming languages because the hyphen is the subtraction operator.

Tips & Best Practices

  • 1
    CSS properties are natively kebab-case: background-color, font-size, border-radius
  • 2
    BEM methodology uses kebab-case with double hyphens: block__element--modifier
  • 3
    kebab-case URLs are preferred for SEO over underscores or camelCase
  • 4
    In JavaScript, access kebab-case properties with bracket notation: obj["my-prop"]
  • 5
    Angular uses kebab-case for component selectors (app-user-profile)

Related Tools

snake_case Converter

Convert text to snake_case for Python variables and database columns.

Text Tools

camelCase Converter

Convert text to camelCase for JavaScript variables and function names.

Text Tools

PascalCase Converter

Convert text to PascalCase for class names and component naming.

Text Tools

Slug Generator

Generate URL-friendly slugs from text with customizable separators.

Text Tools

dot.case Converter

Convert text to dot.case format for configuration keys and properties.

Text Tools

Word Counter

Count words, unique words, characters, and see word frequency in any text.

Text Tools

Frequently Asked Questions

QWhat is kebab-case?
kebab-case uses all lowercase letters with hyphens between words: my-variable, page-title, nav-bar-item.
QWhy can't I use kebab-case for JavaScript variables?
Hyphens are interpreted as the minus operator in JavaScript. Use bracket notation (obj["my-key"]) or camelCase instead.
QIs kebab-case better than snake_case for URLs?
Google treats hyphens as word separators but not underscores, so kebab-case is preferred for SEO in URLs.
QWhat about CSS custom properties?
CSS custom properties (variables) use kebab-case with a -- prefix: --primary-color, --font-size-large.
QHow does BEM relate to kebab-case?
BEM (Block Element Modifier) uses kebab-case as its base, with __ for elements and -- for modifiers.

About kebab-case Converter

kebab-case Converter is a free online tool from FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration required. No ads. Just fast, reliable tools.