Case Converters
Convert to kebab-case
Consistent CSS class names and URL slugs start here. Convert any text to lowercase, hyphen-separated kebab-case instantly.
100% Client-Side — Your Data Never Leaves Your Browser
Quick Answers
- Why do CSS developers use kebab-case?
- CSS class names and HTML data attributes are conventionally written in lowercase kebab-case, like btn-primary and data-user-id.
- How is this different from a URL slug?
- It is very similar, but the slug converter also strips accents and punctuation. Use the slug generator for URLs.
- Does the converter remove numbers?
- No, digits are preserved as word content, so 'v2' becomes 'v-2' only when it is separated from other words.
0 chars
0 chars
How to use kebab-case Converter – Text to Kebab Case
- Type or paste any phrase.
- The kebab-case version appears instantly.
- Copy it into your CSS, HTML or URL structure.
Why use our kebab-case converter – text to kebab case?
kebab-case is the standard for CSS class names, HTML data attributes, URL slugs and many component libraries. This converter lowercases every word and joins them with hyphens, splitting on spaces, underscores and case boundaries. productCard becomes product-card and MY PAGE Title becomes my-page-title. Simple, instant and 100% client-side.
Frequently Asked Questions
Related Tools
camelCase Converter – Text to Camel Case
Turn any phrase into a JavaScript-ready variable name.
snake_case Converter – Text to Snake Case
Turn any phrase into Python-ready snake_case.
PascalCase Converter – Text to Pascal Case
Turn any phrase into a class-ready PascalCase name.
Title Case Converter – Capitalize Titles
Capitalize titles and headings correctly.
UPPERCASE Converter – Text to Uppercase
Transform any text to all capital letters.
lowercase Converter – Text to Lowercase
Transform any text to lowercase in one click.