JSON Tool

CSS to JS Object Converter

Convert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.

Runs in your browserCSS → JavaScript

Loading tool…

Example

Input

background-color: #fff;
-webkit-transition: all .2s;
z-index: 10;

Output

{
  backgroundColor: '#fff',
  WebkitTransition: 'all .2s',
  zIndex: 10,
}

How to use the CSS to JS Object Converter

Paste or type your CSS into the input area, or open a file from your device.
Adjust the options above the editor if the tool offers any.
Review the JavaScript result, then copy it or download it as a file.

Privacy and limitations

Your data is processed on your device and is not uploaded to any server.

HTML to JSX ConverterConvert HTML to React JSX: class to className, inline styles to objects, self-closing void tags and JSX comments.CSS Specificity CalculatorCalculate the specificity (A,B,C) of CSS selectors, including :is(), :not(), :has() and :where(), and see which wins.CSS Border Radius GeneratorSet each corner radius in px, % or rem with a live preview and get the shortest border-radius shorthand.SCSS to CSS CompilerCompile SCSS or indented Sass to plain CSS in your browser with the official Dart Sass compiler, expanded or minified.CSS Box Shadow GeneratorBuild layered CSS box-shadow values visually with offset, blur, spread, colour, opacity and inset controls.Less to CSS CompilerCompile Less to CSS in your browser: variables, mixins, guards, operations and colour functions, readable or minified.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with up to five colour stops, a live preview and copy-ready CSS.EM to PX ConverterConvert em values to pixels from a parent font size, as a list or inside pasted CSS rules.

Browse all css tools →