CSS to JS Object

Convert CSS properties to a JavaScript or React style object

CSS Input

Output (8 properties)

const styles = {
  backgroundColor: "#1a1a2e",
  color: "#eaeaea",
  fontSize: "16px",
  fontFamily: "'Inter', sans-serif",
  padding: "24px 32px",
  borderRadius: "8px",
  boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
  transition: "all 0.3s ease",
};

Output format:

How CSS to JS object conversion works

This tool parses CSS property declarations and converts them to a JavaScript object with camelCase keys — the format used by React's style prop, CSS-in-JS libraries, and HTMLElement.style assignments. For example, background-color becomes backgroundColor. Choose JS Object for a const declaration, React style prop to paste directly into JSX, or JSON for use in APIs or config files. Paste the properties from a CSS rule (without the selector and braces) and copy the result.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Converting a CSS block into the inline-style object a React component expects.
Porting a stylesheet rule into a styled-component or an emotion object.
Producing a JavaScript style object from designer-supplied CSS.
Converting a snippet for a library that only accepts object syntax.
Checking how a property name camel-cases before writing it by hand.

Frequently Asked Questions

Why do property names change to camelCase?: Because a hyphen is the subtraction operator in JavaScript, so `background-color` cannot be a bare object key. The DOM's `style` API and React's `style` prop both use `backgroundColor` for exactly that reason — drop each hyphen, capitalise the letter after it.
Which output format should I pick?: JS Object for a `const` you will import; React style prop for something to paste straight into JSX, which is why it arrives wrapped in the double braces people forget; JSON when the styles go into a config file or over an API, where unquoted keys would be invalid.
Why is every value a string, even the numbers?: Because a CSS value carries a unit and a bare number in React's style prop means pixels. Quoting `16px` keeps it unambiguous, and it is the only safe mechanical default — leaving `1.5` unquoted is right for `line-height` and silently means 1.5px for `width`.
What about vendor prefixes?: `-webkit-transform` becomes `WebkitTransform` — capital W, because the leading hyphen produces a leading capital. `ms` is the exception React documents: `msTransform`, lower-case m. That asymmetry catches people every single time it comes up.
Can I paste a whole stylesheet?: No — give it the declarations from inside one rule, without the selector or braces. This converts a declaration block, not a stylesheet: selectors, media queries and nesting have no representation in a flat style object, and faking it would produce something that looks right and is not.

Common errors and gotchas

Forgetting that unitless numbers are only correct for some properties, so a bare number can be silently wrong.
Assuming vendor prefixes camel-case the same way, where the leading dash becomes a capital in some conventions.
Losing pseudo-selectors and media queries, which inline styles cannot express at all.
Expecting `!important` to survive, which inline style objects have no syntax for.
Converting a custom property, whose name must stay exactly as written rather than being camel-cased.