Paste your CSS with physical properties
Ready to convert
Paste CSS and click Convert
Quick Reference — Physical → Logical
▼
// convert physical css to logical rtl-safe properties
Convert physical CSS properties like margin-left, padding-top to logical equivalents (margin-inline-start, padding-block) for RTL-safe, internationalized layouts.
Ready to convert
Paste CSS and click ConvertEnter your CSS containing physical properties like margin-left, padding-top.
Select which property groups to convert using the checkboxes.
Click Convert, then copy the logical CSS output for use in your project.
CSS Logical Properties map visual directions (left/right/top/bottom) to writing-mode-relative directions (inline-start/end, block-start/end). This makes layouts automatically adapt to RTL languages like Arabic and Hebrew.
CSS Logical Properties are an alternative to physical directional properties (top, right, bottom, left) that work relative to the document's writing mode and text direction. They use keywords like block, inline, start, and end to describe directions abstractly.
With physical properties, you must write separate CSS rules for RTL languages like Arabic or Hebrew using [dir="rtl"] selectors. Logical properties automatically flip — margin-inline-start becomes a right margin in RTL without any extra code.
For horizontal writing modes (most languages), inline-size equals width and block-size equals height. In vertical writing modes (some East Asian scripts), they swap. The option is unchecked by default since it can be surprising.
CSS Logical Properties have excellent modern browser support — all major browsers (Chrome 89+, Firefox 66+, Safari 15+, Edge 89+) support the core margin, padding, border, and inset logical properties. Check caniuse.com for specific property support.
Converting position properties (left, right, top, bottom) to logical equivalents (inset-inline-start, etc.) is beneficial for RTL layouts but is disabled by default because it can produce unexpected results in positioned layouts. Enable it only if you understand the implications.
Shorthand properties like margin and padding also have logical equivalents (margin-block, margin-inline), but converting shorthands requires parsing the values — this tool focuses on the most common longhand property conversions.
CSS Logical Properties and Values is a W3C specification that introduces properties and values that provide control over layout that map to the flow of content rather than to fixed physical directions. Instead of hard-coding visual directions like left, right, top, and bottom, logical properties use abstract terms: inline (the direction text flows) and block (the direction blocks stack).
For example, instead of writing margin-left: 16px, you write margin-inline-start: 16px. In a left-to-right (LTR) context, both produce the same result — a left margin of 16px. But in a right-to-left (RTL) context, the logical property automatically applies the margin to the right side, which is the "start" of the inline axis in Arabic or Hebrew.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
The core concept is that CSS properties have been reclassified into two axes:
This means margin-top and margin-bottom become margin-block-start and margin-block-end, while margin-left and margin-right become margin-inline-start and margin-inline-end.
Internationalisation (i18n) is increasingly important for web applications. Arabic is the 4th most spoken language in the world, Hebrew is widely used, and Farsi/Persian also uses right-to-left script. Traditional CSS requires a significant amount of overrides when supporting these languages:
margin-left needs a corresponding [dir="rtl"] margin-right ruleLogical properties eliminate this overhead entirely. By writing margin-inline-start once, the browser handles the mirroring automatically based on the element's writing mode or the document's dir attribute.
This tool performs straightforward text substitution on your CSS — it does not parse the CSS into an AST, so it handles most common patterns reliably while keeping the conversion fast and predictable. Simply paste your existing CSS, choose which property groups you want to convert, and click Convert. The output will have all selected physical properties replaced with their logical equivalents.
The tool supports conversions across multiple categories:
text-align: left/right becomes start/end, and float values similarly adopt inline equivalentsborder-top-left-radius map to border-start-start-radiusThe good news is that browser support for CSS Logical Properties is excellent as of 2024. Chrome, Firefox, Edge, and Safari have all supported the core properties for several years. The inset-* properties and full border-radius logical properties have slightly newer support but are safe for modern web applications targeting evergreen browsers.
For projects that need to support older browsers, a common approach is to keep both the physical property (as a fallback) and add the logical property below it. This provides broad compatibility while future-proofing your code for RTL support.
Beyond the longhand properties that this tool converts, CSS Logical Properties also introduces new shorthand notations. margin-block sets both margin-block-start and margin-block-end at once, similar to how the existing shorthand margin-top/bottom can be set with one value. Similarly, margin-inline, padding-block, padding-inline, and inset are all available as shorthand logical properties.
The inset shorthand is especially powerful — it replaces top: 0; right: 0; bottom: 0; left: 0 with simply inset: 0, and also has its block/inline variants: inset-block and inset-inline.
One of the less obvious benefits of logical properties is support for vertical writing modes used in Japanese, Chinese, and Korean typography. When writing-mode: vertical-rl is applied, the block and inline axes rotate. A logical margin-block-start becomes a right margin visually, while margin-inline-start becomes a top margin. Physical properties would require completely separate rule sets; logical properties handle it transparently.
This makes logical properties valuable not just for RTL support but for any internationalized or typographically complex web application that respects the reading direction and writing mode of its users.