Web Tools tools.bryantsmith.com

Creative Workflow Helpers

CSS Logical Properties Converter

Turn physical, directional CSS like margin-left, right or text-align: left into logical properties such as margin-inline-start, inset-inline-end and text-align: start — or the other way around. Your CSS never leaves the page.

Runs in your browser v1.0.0

Conversion

live
Direction
Writing direction

Your CSS

0 lines

Converted CSS

live 


                

                    
                    
                    
                    
                

            

        

    


    

        

            
Preview

            converted CSS applied
        

        

            

                A sample box with the converted declarations applied in both directions. Logical
                properties follow the text direction, so the box flips automatically.
            

            

                

                    
LTR

                    

                        
Box

                    

                

                

                    
RTL

                    

                        
Box

                    

                

            

        

    


    

        

            
How it works

        

        

            

                Physical → Logical rewrites directional properties such as
                margin-left, top, width and
                border-top-left-radius into their logical equivalents
                (margin-inline-start, inset-block-start,
                inline-size, border-start-start-radius). The mapping depends on the
                chosen writing direction and writing mode, so margin-left becomes
                margin-inline-start for LTR and margin-inline-end for RTL.
                Logical → Physical does the reverse. Four-value shorthands are grouped
                into …-block / …-inline pairs, and non-directional
                declarations, comments and strings are left untouched. Everything runs in the browser and the
                input, options and result can be shared through the URL fragment.
            

        

    




Related tools
  • PHP Array / JSON ConverterConvert PHP array syntax to JSON and JSON back to PHP array syntax, entirely in your browser.
  • .env Compare & MergeCompare development, staging, and production .env key sets without exposing secret values, then build a merged template.
  • Accessible Name CalculatorPaste HTML, pick an element, and see the accessible name assistive technology computes — entirely in your browser.
  • Apache Rewrite TesterTest Apache mod_rewrite rules against a sample request path and see the rewritten URL, redirects, captures and warnings.
  • Cookie Builder & InspectorBuild a Set-Cookie header or paste one to inspect its expiry, path, domain, Secure, HttpOnly and SameSite attributes — entirely in your browser.
  • CORS Header Builder & ExplainerModel a cross-origin request and get the exact CORS response headers to send, explained in plain language.
More Creative Workflow Helpers tools