CSS Logical Properties Converter — Physical to Logical CSS | CSSAWWWARDS — CSS Tools Directory<br>Skip to main content<br>+ Submit tool
New toolFree · No signup<br>CSS Logical Properties Converter<br>Logical properties adapt to writing-mode, direction, and text-orientation — making your CSS work correctly in RTL, vertical, and other non-LTR layouts. Paste your physical CSS on the left and get the logical equivalent on the right, with a full property reference below.<br>Share:Share on XLinkedInCopy link
13 properties converted<br>Physical CSS<br>.container {<br>width: 640px;<br>min-height: 200px;<br>margin-top: 1.5rem;<br>margin-bottom: 1.5rem;<br>margin-left: auto;<br>margin-right: auto;<br>padding-left: 1.5rem;<br>padding-right: 1.5rem;<br>border-left: 3px solid #1D9E75;<br>border-top-left-radius: 8px;<br>border-bottom-left-radius: 8px;<br>text-align: left;<br>overflow-x: hidden;<br>Logical CSS<br>Logical Properties OutputCopy CSS<br>.container { inline-size: 640px; min-block-size: 200px; margin-block-start: 1.5rem; margin-block-end: 1.5rem; margin-inline-start: auto; margin-inline-end: auto; padding-inline-start: 1.5rem; padding-inline-end: 1.5rem; border-inline-start: 3px solid #1D9E75; border-start-start-radius: 8px; border-end-start-radius: 8px; text-align: start; overflow-inline: hidden;}
Property reference<br>Physical (LTR)Logical equivalentmargin-top / bottommargin-block-start / endmargin-left / rightmargin-inline-start / endpadding-top / bottompadding-block-start / endpadding-left / rightpadding-inline-start / endborder-top / bottomborder-block-start / endborder-left / rightborder-inline-start / endborder-top-left-radiusborder-start-start-radiusborder-bottom-left-radiusborder-end-start-radiustop / bottominset-block-start / endleft / rightinset-inline-start / endwidth / heightinline-size / block-sizemin/max-widthmin/max-inline-sizemin/max-heightmin/max-block-sizeoverflow-x / yoverflow-inline / blocktext-align: left/righttext-align: start/endfloat: left/rightfloat: inline-start/end<br>Logical properties adapt to writing-mode, direction, and text-orientation — essential for RTL and vertical-script support.
How to use<br>01Paste your CSS<br>Paste any CSS rule set into the left panel. The default shows a typical LTR component with margin, padding, and border declarations.
02See the conversion<br>The right panel shows the logical equivalent in real time. Changed lines are automatically highlighted.
03Copy the output<br>Hit Copy CSS to grab the converted logical properties block.
04Check the reference<br>The mapping table below lists all physical ↔ logical property pairs for quick reference.
More utility tools<br>From our directory of 30+ CSS tools.
Browse all →<br>utilities
Flexbox Froggy<br>Learn CSS Flexbox through 24 interactive coding puzzles with frogs.<br>#flexbox#learning#interactive
utilities
Cubic Bezier<br>Drag control handles to create and compare custom CSS easing curves.<br>#easing#animation#timing-function
utilities
Easing Functions Cheat Sheet<br>Visual reference for every CSS easing function with live animation demos.<br>#easing#animation#reference
utilities
Tailwind CSS Cheat Sheet<br>Searchable, filterable reference for every Tailwind CSS utility class.<br>#tailwind#reference#cheatsheet
utilities
CSS Reference<br>Visual, illustrated reference for every CSS property with live examples.<br>#reference#documentation#properties
utilities
CSS-Tricks<br>The definitive CSS reference, almanac, and tutorial hub for developers.<br>#reference#tutorials#almanac
Know a great CSS tool?<br>Submit it to the directory and help developers discover it.
Submit a tool →
© 2026 CSSAWWWARDS · Built for CSS developers · Not affiliated with Awwwards<br>Privacy PolicyTerms of Service