CSS Escape & Unescape
Escape text into a valid CSS identifier (CSS.escape). This tool does both escape and unescape on one page — just pick a mode, paste your text, and click. Everything runs on your device, nothing is sent to a server.
Everything runs in your browser. Your data is never sent to our servers.
Example
Example Input
item .one#two
Example Output
item\ \.one\#two
How to Use
- 1Choose Escape or Unescape mode at the top.
- 2Type or paste your text into the Input field.
- 3Click the button (or press Ctrl+Enter) to process. The result appears in the Output field.
- 4Click Copy to copy the result, or "Swap input/output" to quickly reverse the operation.
About CSS
CSS Escape turns text into a form safe to use as a CSS identifier or selector, using the browser's built-in CSS.escape() API. Special characters are backslash-escaped or turned into hex escapes.
How it works: characters invalid in a CSS identifier (spaces, symbols, etc.) are escaped so they can be used, for example, in document.querySelector without errors. Unescape reverses those escapes.
CSS Escape is useful when you build selectors dynamically from untrusted values (e.g. an ID or class containing special characters), so element matching stays safe and correct.
FAQ
Can this CSS tool both escape and unescape?
Yes. This is a single page with a toggle — use Escape mode to transform text, and Unescape mode to reverse it. No need for two separate pages.
Is my data sent to a server?
No. CSS is processed entirely in your browser. The text you enter never leaves your device.