What Is This Tool?
Kebab case (kebab-case) is a naming convention where all letters are lowercase and words are separated by hyphens (-). It is the standard format for URL slugs, CSS class names, HTML IDs, and npm package names. The hyphens between words resemble pieces of food on a kebab skewer — hence the name.
Our converter instantly transforms any text — whether it has spaces, underscores, camelCase, or mixed formatting — into clean, properly formatted kebab-case. It strips special characters, handles multiple word separators, and produces SEO-friendly slugs ready for your URLs and CSS.
This tool is essential for:
- Web developers creating CSS class names and HTML IDs
- SEO specialists generating clean, crawlable URL slugs
- npm package authors naming packages (npm requires lowercase + hyphens)
- Content managers creating blog post and page slugs from titles
- Frontend engineers using BEM methodology and CSS naming conventions
Related tools: Case Converter and URL Encoder.
Why You Need It in 2026
1. SEO-Friendly URLs Are Non-Negotiable
Search engines prefer hyphen-separated URLs because they're readable as natural language. A slug like how-to-bake-a-cake ranks better and gets more clicks than howtobakeacake or how_to_bake_a_cake. Google explicitly recommends hyphens over underscores for URL word separation.
2. CSS Class Names Must Use Hyphens
CSS class names conventionally use kebab-case (.main-container, .nav-item, .btn-primary). This is the recommended format in CSS, Sass, and Tailwind CSS. CSS modules, Styled Components, and BEM methodology all expect hyphen-separated class names.
3. HTML IDs Require Readable Separators
HTML IDs use kebab-case for readability (id="submit-button"). They're accessible via CSS selectors and JavaScript's querySelector. Hyphens are the only separator that works correctly in both CSS selectors and DOM APIs.
4. npm Package Names Must Be Kebab-Case
npm requires lowercase package names with hyphens (my-awesome-package). This is mandatory for publishing to the npm registry. Converting your package name to kebab-case before publishing prevents rejection and naming conflicts.
5. Markdown and Static Site Generators
Hugo, Jekyll, Gatsby, and Next.js all generate URL slugs from page titles using kebab-case. If your CMS doesn't auto-convert, you need a reliable converter to create clean, consistent slugs across your entire site.
✨ Try Our Free Tool
How to Use: Step-by-Step
Step 1: Enter Your Text
Type or paste any text with spaces, underscores, camelCase, or mixed separators. The converter handles all common input formats — blog post titles, product names, feature descriptions — and normalizes them to kebab-case.
Step 2: Instant Slug Generation
The kebab-case result appears automatically as you type. No button click needed. The converter strips special characters, collapses multiple separators into single hyphens, and lowercases everything for URL-safe output.
Step 3: Copy and Deploy
Click the Copy button and paste the result into your HTML, CSS, URL routes, or npm package.json. The output is clean, lowercase, and ready for production use in any web context.
Real-World Examples
Scenario: You're publishing a blog post titled "How to Optimize Your Website for Mobile in 2026" and need a clean URL slug.
Challenge: The title is 52 characters with spaces and special characters. You need a short, SEO-friendly URL that Google will index and users will understand.
Solution: Paste the full title into the converter. Output: how-to-optimize-your-website-for-mobile-in-2026. You shorten it to optimize-website-mobile-2026 for a cleaner slug. Both are valid kebab-case.
Scenario: You're building a React component library and need to name a new button component that displays a loading spinner.
Challenge: Your CSS uses BEM naming (.button--loading-state). You need the base class name in proper kebab-case for consistency across the library.
Solution: Paste "Loading State Button" into the converter. Output: loading-state-button. Your BEM classes become .loading-state-button, .loading-state-button--active, .loading-state-button__icon — fully consistent.
Scenario: You're publishing an npm package that converts Markdown to HTML. You've decided on the name "markdown-to-html-converter".
Challenge: npm rejects your initial name "MarkdownToHTMLConverter" because it contains uppercase letters and no hyphens.
Solution: Paste the name into the converter. Output: markdown-to-html-converter. npm accepts it immediately. Your package is now findable via npm install markdown-to-html-converter.
Best Practices
1. Always Use Lowercase for URLs
Kebab-case is always lowercase. Capital letters in URLs can cause 404 errors on case-sensitive servers and split your link equity between /My-Page and /my-page. Always lowercase your slugs.
2. Keep URL Slugs Short and Descriptive
URL slugs should be 3-5 words maximum. Remove stop words (the, and, a, an, in, for) when possible for cleaner slugs. Shorter slugs are easier to share, remember, and type manually.
3. Use Semantic CSS Class Names
CSS class names in kebab-case should describe the purpose, not the appearance. Use .nav-item not .blue-box, .card-title not .large-bold-text. Semantic names survive design changes without requiring class renames.
4. Match URL Structure to Navigation
Kebab-case URLs should match your site's navigation hierarchy. /blog/my-post is better than /posts/123 for both user experience and SEO. Descriptive slugs help search engines understand your content hierarchy.
5. Never Use Kebab-Case in JavaScript
JavaScript identifiers don't allow hyphens — my-variable is a syntax error. Use camelCase for JavaScript variables and kebab-case only for CSS classes, HTML IDs, and URLs.
Frequently Asked Questions
Q: Why is it called kebab-case?
A: The hyphens between words resemble pieces of food on a kebab skewer. It's one of several food-named conventions (snake_case, camelCase, PascalCase).
Q: Is kebab-case better for SEO?
A: Yes! Search engines prefer hyphen-separated URLs (kebab-case) as they're the most readable for both users and crawlers. Google explicitly recommends hyphens over underscores for URL word separation.
Q: Can I use kebab-case in JavaScript?
A: No. JavaScript identifiers don't allow hyphens — my-variable is a syntax error. Use camelCase for code and kebab-case only for CSS, HTML IDs, and URLs.
Q: What's the difference from snake_case?
A: kebab-case uses hyphens (-), snake_case uses underscores (_). Hyphens are URL-safe and SEO-friendly; underscores can be hidden in underlined links and aren't recommended for URLs.
Q: Can I generate multiple slugs at once?
A: Yes! Paste multiple lines or paragraphs and each line will be converted to a clean kebab-case slug independently.
Q: Does it handle special characters and numbers?
A: Yes. Special characters are stripped and numbers are preserved. "Article #1: Getting Started!" becomes "article-1-getting-started".
Q: Is this tool secure?
A: Yes. All processing is local in your browser. Nothing is sent to any server.
Ready to Try It?
Convert your text to kebab-case now. Free, instant, no signup required.
Go to Tool