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.

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

What is kebab-case Converter – Text to Kebab Case?

Turn any phrase into CSS and URL friendly kebab-case. Consistent CSS class names and URL slugs start here. Convert any text to lowercase, hyphen-separated kebab-case instantly. The tool runs 100% in your browser — nothing is uploaded to a server, so your data stays private, and it is free to use with no signup required.

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.

Original text

0 chars

kebab-case result

0 chars

How do I 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.