CSS to JS Style Object Converter
Paste CSS declarations (property: value;) and get a JavaScript style object with camelCased keys, ready for React's `style` prop or any JS styling. Vendor prefixes and CSS custom properties are handled. Everything runs locally in your browser — nothing is uploaded.
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.
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.
Related tools
HTML → JSX Converter
Paste an HTML snippet and get React-ready JSX — `class` becomes `className`, `onclick` becomes `onClick`, void tags self-close, inline styles can be object-ified.
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.
HTML / CSS / JS Minifier
Strip whitespace and comments from HTML, CSS, or JavaScript — see the size saved and copy the result.
EditorConfig Generator
Build an .editorconfig file with indent style, line endings, charset and common overrides, in your browser.
CSS Selector Tester
Test a CSS selector against your HTML and see exactly which elements it matches, in your browser.
CSS Flexbox Playground
Visually pick flex-direction, justify-content, align-items, and gap — copy the resulting CSS or Tailwind class.