kebab-case to camelCase
Convert kebab-case to camelCase in your browser: background-color becomes backgroundColor. With 6 examples, acronyms and digits included — one of them does not convert back unchanged, and the page shows why. Free, nothing uploaded.
Part of writing tools and developer tools.
camelCase
backgroundColor
PascalCase
BackgroundColor
snake_case
background_color
SCREAMING_SNAKE_CASE
BACKGROUND_COLOR
kebab-case
background-color
Title Case
Background Color
Sentence case
Background color
lower case
background color
UPPER CASE
BACKGROUND COLOR
kebab-case to camelCase examples
| kebab-case | camelCase | Copy |
|---|---|---|
| background-color | backgroundColor | |
| z-index | zIndex | |
| border-top-left-radius | borderTopLeftRadius | |
| grid-template-columns | gridTemplateColumns | |
| data-user-id | dataUserId | |
| heading-level-2 | headingLevel2 |
One row does not survive the round trip back to kebab-case: headingLevel2 comes back as heading-level2, not heading-level-2. The converter keeps only the words, lowercased, so the capitals of an acronym and the place of a separator before a digit are gone once the text is converted.
Where you convert kebab-case to camelCase
CSS names are kebab-case, and they turn into camelCase the moment they cross into JavaScript: element.style.backgroundColor, a React style={{ zIndex: 1 }}, or dataset, which exposes data-user-id as dataset.userId. The browser only uppercases a letter that follows a hyphen, though, so data-step-2 stays dataset["step-2"] where this converter gives step2.
How the conversion works
The converter first reads border-top-left-radius as the words border / top / left / radius — splitting on spaces, underscores and hyphens, before every capital that follows a lowercase letter or a digit, and before the last capital of a run that starts a new word (HTTPResponse is HTTP / Response). Then it keeps the first word lowercase, capitalises the first letter of every following word and joins them with no separator: borderTopLeftRadius. Since it starts from the words and not from the kebab-case spelling, text already in any other case gives the same result.
Other conversions
Going the other way? camelCase to kebab-case.
- camelCase to snake_case
- snake_case to camelCase
- camelCase to SCREAMING_SNAKE_CASE
- Sentence case to camelCase
Or open the full case converter and see your text in all nine cases at once.