DOM style property
backgroundColorelement.style.backgroundColor = valueCSS Property to camelCase Converter
Convert dashed CSS property names into the JavaScript names used by DOM style objects and React. The converter treats vendor prefixes, float, and custom properties as CSS-specific cases instead of generic kebab-case.
React style key
backgroundColorstyle={{ backgroundColor: value }}Standard dashed CSS names map to the same camelCase spelling in DOM style objects and React style props.
Conversion runs locally in your browser.
CSS-specific conversion rules
The converter follows CSSOM and React style-object naming rather than treating every property as ordinary kebab-case.
- Standard names such as background-color become backgroundColor.
- Custom properties such as --brand-color are preserved instead of becoming brandColor.
- The CSS float property is exposed as cssFloat on DOM style objects, while React accepts float.
- Vendor prefixes use platform-specific casing such as webkitLineClamp for DOM and WebkitLineClamp for React.
Translate stylesheet property names when writing element.style assignments or reading CSSStyleProperties.
Prepare property names for React inline style objects without accidentally rewriting custom properties.