CSS to JS Object Converter

Paste CSS to get a JavaScript style object, or paste a JS object to get CSS. Property names are camelCased (and back), vendor prefixes and custom properties are kept intact, and plain numeric values become real numbers. Handy for React inline styles, styled-components, and emotion. Everything runs in your browser.

Code

Convert CSS into a JavaScript style object or a JS object back into CSS, right in your browser. Property names are camelCased both ways, vendor prefixes and --custom properties are kept intact, and plain numbers stay numbers for React.

Quotes:

CSS Input

JS Object Output

What this tool does

It turns a block of CSS into a JavaScript style object and turns an object back into CSS. Going to JS, background-color becomes backgroundColor, values are quoted, and a plain number like z-index: 10 becomes the number 10 so React accepts it directly. Going to CSS, the reverse mapping runs. Both directions update as you type and never touch a server.

Why you'd use this

React inline styles, styled-components, and emotion all want camelCased keys, but most CSS you copy from a design tool, a tutorial, or DevTools is plain kebab-case. Pasting it here saves the tedious hand-conversion, and the reverse direction is useful when you need to drop a JS style object into a regular stylesheet.

Selectors, vendor prefixes, and custom properties

A flat declaration block becomes a flat object. CSS with rules (selectors or @media) becomes an object keyed by selector with nested objects, which matches how styled-components and emotion nest styles. Vendor prefixes are preserved (-webkit-transition becomes WebkitTransition, -ms- stays lowercase as ms...), and CSS custom properties like --main-color are kept verbatim as quoted keys.