Convert camelCase to kebab-case
CSS class names, HTML attributes, npm package names, and URLs all use kebab-case, while the JavaScript that manipulates them uses camelCase. This converter splits identifiers at capital-letter boundaries and re-joins them with hyphens — the exact transform browsers apply between CSS properties and their camelCase DOM equivalents.
backgroundColor marginTop userProfileCard HTTPRequest
background-color margin-top user-profile-card http-request
Try it with your own data
How to convert camelCase to kebab-case
- Split the identifier at each lowercase-to-uppercase boundary (backgroundColor → background, Color).
- Lowercase every word.
- Join the words with hyphens.
Frequently asked questions
Why does CSS use kebab-case but JavaScript camelCase?
A hyphen is the subtraction operator in JavaScript, so background-color can't be a property name — the DOM exposes it as backgroundColor instead. The two names refer to the same CSS property.
Is kebab-case safe in URLs and file names?
Yes — hyphens are unreserved in URLs and Google treats them as word separators, which is why kebab-case is the standard for slugs and static file names.
How does the converter know where words start and end?
It splits on separators (underscores, hyphens, spaces) and on lowercase-to-uppercase boundaries, keeping acronym runs together — so HTTPServerError splits into HTTP, Server, Error regardless of the input convention.
Can I convert many identifiers at once?
Yes — put one identifier or phrase per line and every output format converts the whole list, ready to copy as a block.