CSS to JS object converter
Convert CSS declarations to a React/JS inline-style object, and back again.
CSS to JS object converter
Paste a block of CSS declarations and get a JavaScript style object back, ready to drop into a React or Preact component's style prop. Every kebab-case property becomes camelCase — background-color turns into backgroundColor, font-size into fontSize — and the whole thing is printed as a valid object literal with two-space indentation. You can paste bare declarations or a full rule with a selector and braces; the wrapping selector is stripped for you, so copying a rule straight out of DevTools just works.
The converter goes both ways. Switch the direction to JS object → CSS and a style object turns back into ordinary prop: value; lines, with camelCase hyphenated again and the string quotes removed. That makes it easy to move a style out of a component and into a stylesheet, or to check what a set of inline styles actually renders as. Custom properties like --brand-color keep their leading dashes and stay quoted, because they are not valid identifiers, and vendor prefixes are handled the way React expects them: -webkit-box-shadow becomes WebkitBoxShadow, while -ms- prefixes use the lowercase msFlex form.
By default every value is emitted as a string, which is the safe choice — it keeps units, colors and things like line-height: 1.5 intact. Turn on "Unitless values as numbers" and pure numbers such as z-index or opacity are written as numbers instead, matching how you would usually type them by hand. You can also choose single or double quotes to match your project's formatter.
Everything runs in your browser. The CSS you paste is never uploaded, so pasting styles from a private design system or an internal component library stays on your machine. Copy the result, download it as a file, or send it on to another tool.