Back to converter

About css2logical

What is this tool?

css2logical is a free online tool that converts traditional CSS physical properties to their logical equivalents. Simply paste your CSS, click convert, and get internationalization-ready code instantly.

What are CSS Logical Properties?

CSS Logical Properties are a modern CSS feature that allows you to write styles based on the logical flow of content rather than physical directions. Instead of using left and right, you use inline-start and inline-end.

This makes your CSS automatically adapt to different writing modes and text directions, such as right-to-left (RTL) languages like Arabic and Hebrew.

Why use Logical Properties?

  • Better internationalization: Your layouts automatically flip for RTL languages
  • Future-proof: Logical properties are the modern standard
  • Cleaner code: No need for separate RTL stylesheets
  • Wide browser support: Supported in all modern browsers

Properties Converted

This tool converts the following property categories:

  • Margins (margin-left → margin-inline-start)
  • Padding (padding-top → padding-block-start)
  • Borders (border-right → border-inline-end)
  • Border radius (border-top-left-radius → border-start-start-radius)
  • Positioning (left/right/top/bottom → inset-*)
  • Sizing (width/height → inline-size/block-size)
  • Text alignment (text-align: left → text-align: start)
  • Float and clear

Privacy

All conversions happen in your browser. Your CSS code is never sent to any server. See our Privacy Policy for more details.

Open Source

This tool is open source. Contributions, bug reports, and feature requests are welcome on GitHub.