# Convert camelCase to kebab-case

> Convert camelCase to kebab-case online. Free converter for CSS classes, file names, and URL slugs, with a live bulk tool.

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.

## Example: camelCase → kebab-case

Input:
```
backgroundColor
marginTop
userProfileCard
HTTPRequest
```

Output:
```
background-color
margin-top
user-profile-card
http-request
```

## How to convert camelCase to kebab-case

1. Split the identifier at each lowercase-to-uppercase boundary (backgroundColor → background, Color).
2. Lowercase every word.
3. Join the words with hyphens.

## FAQ

### 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.

## Related converters

- [kebab-case → camelCase](https://www.devkult.com/convert/kebab-to-camel.md)
- [camelCase → snake_case](https://www.devkult.com/convert/camel-to-snake.md)
- [Text → Slug](https://www.devkult.com/convert/text-to-slug.md)

Open the interactive converter: https://www.devkult.com/convert/camel-to-kebab