Skip to main content
iotools.cloudiotools.cloud

CSS to JS Style Converter

Convert CSS declarations to a React inline style object, a React Native StyleSheet, or a styled-components/Emotion css template literal — and convert JS style objects back to plain CSS.

Input

Output

Output
Was this helpful?

Guides

What this tool does

Paste a block of CSS declarations and get back a ready-to-use JavaScript style object — or go the other way and turn a JS style object back into plain CSS. It targets the three ways CSS shows up in modern JavaScript UI code, each with different rules for property names and values:

  • React Inline Style — a plain object with camelCase keys (backgroundColor, fontSize) for the style prop. Numeric pixel values are converted to bare numbers where React auto-appends px (fontSize: 16), while unitless properties like opacity and fontWeight stay numeric because CSS itself treats them as unitless.
  • React Native StyleSheet — the same camelCase conversion, wrapped in StyleSheet.create({ container: { ... } }). Layout properties (width, margin, padding, borderRadius, fontSize, and friends) have their px suffix stripped since React Native measurements are unitless numbers by convention.
  • styled-components / Emotion — a tagged template literal (const styles = css`...`;). Unlike the other two formats, property names stay in their original kebab-case and values are copied verbatim — styled-components and Emotion parse real CSS syntax inside the template literal, so no camelCase conversion or numeric coercion happens here.

Switching Conversion Direction to JavaScript → CSS reverses the process: paste a JS style object (quoted or unquoted keys, string or numeric values) and get back standard property: value; CSS lines. Numeric values are re-expanded to pixels unless the property is one of the unitless ones (opacity, zIndex, flex, lineHeight, etc.), which are written back as plain numbers.

How to use it

  1. Pick a Conversion Direction — CSS → JavaScript or JavaScript → CSS.
  2. For CSS → JavaScript, choose an Output Format: React Inline Style, React Native StyleSheet, or styled-components/Emotion.
  3. Paste your CSS declarations (or JS style object) into the input box, either as loose property: value; lines or wrapped in a selector { ... } block.
  4. The output updates automatically as you type.

FAQ

Why does font-size: 16px become fontSize: 16 in React but stays font-size: 16px in styled-components? React's inline style prop treats bare numbers on most properties as pixels, so the tool strips px. styled-components and Emotion render literal CSS text, so the unit has to stay.

Which properties keep their px in React Native? Only the ones React Native expects numbers for: dimensions, spacing (margin*, padding*), position offsets, border widths/radii, fontSize, letterSpacing, and gap properties. Anything else is quoted as a string.

Does it handle vendor-prefixed properties? Yes — -webkit-, -moz-, -ms-, and -o- prefixes convert to their JS equivalents (WebkitTransform, MozTransform, msTransform, OTransform) and back.

Does it understand full CSS selectors or nested rules? No — it reads only the declarations, whether typed loose or wrapped in a single { ... } block. Selectors, media queries, and nested rules aren't parsed.

What happens to CSS custom properties (--my-var)? Declarations defining a custom property (starting with --) are skipped in the CSS → JS direction; using var(--my-var) as a value is preserved as-is.

Privacy

This tool runs entirely in your browser — your CSS and JavaScript never leave your device or touch a server.

cssjavascriptreactreact-nativestyled-componentsemotioncss-in-jsconverter

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-style-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "conversionDirection": "css-to-js",
    "outputFormat": "react-inline",
    "cssInput": "background-color: #3b82f6;\nfont-size: 16px;\nopac…"
  }'

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-style-converter` tool (CSS to JS Style Converter) on this input:

YOUR_INPUT_HERE

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

Love the tools? Lose the ads.

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

Remove ads