CSS to JS Style Converter

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.