CSS to JS Style Object Converter
Convert a CSS declaration block into a React/JS inline style object, in your browser.
How to use
- Paste your CSS declarations into the input box.
- Each property is camelCased and each value quoted as a string.
- Copy the generated style object from the output box.
About this tool
ShowHide
Paste CSS declarations and get a JavaScript style object with camelCased keys, ready for React's style prop or any JS styling. The two cases people get wrong are handled for you. Vendor prefixes follow React's own rule, which is not symmetrical: -webkit-transform becomes WebkitTransform with a capital W, while -ms-transform becomes msTransform with a lowercase m. And custom properties keep their name exactly — --brand-color stays --brand-color and is quoted, because it is not a valid JavaScript identifier. Values are emitted as strings rather than bare numbers, which avoids relying on React's implicit px for unitless numeric values. Everything runs locally in your browser — nothing is uploaded.
Frequently asked questions
How are property names converted?
Hyphenated properties become camelCase (font-size becomes fontSize). Vendor prefixes follow React's rules: -webkit- becomes Webkit, while -ms- stays lowercase ms.
What about CSS custom properties?
Variables like --main-color keep their name and become a quoted key, since React applies them verbatim.
Are values converted to numbers?
No. All values are emitted as quoted strings, which is always valid. Drop the quotes manually for unitless numeric values if you prefer.
Is my CSS sent anywhere?
No. Conversion happens entirely in your browser; nothing is uploaded.
Why is WebkitTransform capitalised but msTransform is not?
That asymmetry is React's, not this tool's. React uppercases the vendor prefix for every vendor except Microsoft's, where ms stays lowercase. It reads like a bug and is documented behaviour, so a hand-written msTransform with a capital M silently does nothing.
Can I set a CSS variable through the style object?
React has supported custom properties in the style prop since version 16, so the quoted key this tool emits works as written. Outside React, an object like this passed to Object.assign on element.style will not — a name starting with two dashes needs setProperty.
Related tools
HTML → JSX Converter
Paste an HTML snippet and get React-ready JSX — class becomes className, onclick becomes onClick, and void tags self-close.
Developer
JS Object ↔ JSON
Convert a JavaScript object literal ({name: 'Alice'}) to strict JSON — or strict JSON back into a tidy JS literal with unquoted keys.
Convert
HTML / CSS / JS Minifier
Strip whitespace and comments from HTML, CSS, or JavaScript — see the size saved and copy the result.
Developer
Python .pyc Bytecode Inspector
Open a .pyc from __pycache__ in your browser: which CPython wrote it, timestamp or hash invalidation, the code object tree and the disassembly.
Developer
Git Object ID (hash-object)
Work out the git object id of a blob, tree, commit or tag in both SHA-1 and SHA-256, with the header git hashes and the loose object path.
Developer
EditorConfig Generator
Build an .editorconfig file with indent style, line endings, charset and common overrides, in your browser.
Developer