Skip to content

Premium CSS Studio · free · no sign-up

CSS to JSON Converter

Convert CSS rules into a JSON object.

How it works Report a problem

CSS to JSON

Convert CSS selectors and properties into structured JSON

Data Architect
CSS Source
JSON Representation 

                

            

        

    






                

            


                            

                                            

            
About the CSS to JSON Converter

        
Convert CSS rules into a JSON object.

    
            
How to use the CSS to JSON Converter

        
    
                            
  1. Paste your code into the input box, or click Load Example to load an example.
    2. 
                            
  2. Press Convert to JSON Object.
    3. 
                            
  3. Use Copy (or Download where shown) to keep the result. Clear empties the box.
    4. 
                    

    
    
    
            
Worked example

        
.btn { color: red; } becomes {".btn": {"color": "red"}}.

    
    
    
            
Tips

        
    
                            
  • Handy for using CSS in JavaScript styling libraries.
    • 
                    

    

                    
                                            

                            

                                
Frequently asked questions

                                                            

                                                            

                                    What is it used for?
                                    
CSS-in-JS libraries and tools that read styles as data.