Skip to main content
iotools.cloudiotools.cloud

CSS to JS Converter

Convert CSS declarations into a JS style object (React inline style, React Native StyleSheet, styled-components, Emotion, or plain object) — and back from JS to CSS.

Input

Output

Output
Was this helpful?

More ways to use this tool

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "direction": "css-to-js",
    "cssInput": ".container {\n  display: flex;\n  background-color…",
    "outputFormat": "react"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `css-to-js-converter` tool (CSS to JS Converter) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/css-to-js-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSS to JS Converter — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

What this tool does

CSS-in-JS libraries and React don't take plain CSS syntax — they want a JavaScript object where properties are camelCase and values are (mostly) quoted strings. This tool converts CSS declarations you already have — copied from a stylesheet, a design tool export, or written by hand — into that object shape, and can convert the other direction too: paste a JS style object and get plain CSS back.

It supports five CSS-to-JS output formats:

  • React Inline Style — a plain const styles = { ... } object, ready for style={styles}.
  • React Native StyleSheet — wrapped in StyleSheet.create({ container: { ... } }), with px units stripped to plain numbers (React Native has no unit strings).
  • styled-components — a tagged template literal (styled.div\...``) that keeps your original kebab-case CSS, since styled-components accepts real CSS syntax.
  • Emotion css Prop — the same camelCase object shape as React, wrapped in css({ ... }).
  • Plain JS Object — just the object literal, with no surrounding variable declaration, for pasting into your own code.

How to use it

  1. Pick a Direction: "CSS to JS" (the default) or "JS to CSS".
  2. Paste your CSS declarations (a full rule block like .card { ... } or bare property: value; lines both work) — or, for JS to CSS, paste a JS style object.
  3. For CSS to JS, choose an Output Format from the five options above.
  4. The converted code appears instantly in the output box. Copy it or download it as styles.js.

Conversion details

  • Property names convert kebab-case to camelCase (background-color → backgroundColor) and back.
  • Vendor-prefixed properties follow React's convention: -webkit-transform → WebkitTransform, -ms-overflow-style → msOverflowStyle (lowercase ms, unlike other prefixes).
  • CSS custom properties (--my-color) are left untouched and quoted as object keys.
  • Plain numeric values (z-index: 10, line-height: 1.5) become unquoted JS numbers; everything else becomes a single-quoted string. React Native additionally converts px values like padding: 16px to the bare number 16.
  • Declaration order in your input is preserved in the output.

FAQ

Does it handle a full CSS rule, or just bare declarations? Both. Paste a complete rule (.container { display: flex; ... }) and the selector is stripped automatically, or paste just the semicolon-separated declarations on their own.

What does "JS to CSS" produce? A single .selector { ... } block with camelCase keys converted back to kebab-case. Values are copied through as-is, since the tool can't know what unit a bare number was meant to have.

Why does styled-components output look different from the other formats? styled-components' tagged template accepts real CSS syntax, so that format keeps your original property names and values verbatim rather than converting to a JS object.

Will it validate my CSS or JS syntax? No — this is a lightweight parser, not a full CSS/JS parser. Malformed input is parsed best-effort; if nothing usable is found, the output explains that instead of failing silently.

Privacy

All conversion happens locally in your browser. Nothing you paste is uploaded or stored.

cssjavascriptreactreact nativestyled-componentsemotionconverterdeveloper

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads