CSS Logical Properties Converter
Paste CSS written with physical properties (margin-left, top, width…) and get the logical equivalents (margin-inline-start, inset-block-start, inline-size…) that adapt automatically to right-to-left and vertical writing modes.
About this tool
Logical properties describe layout in terms of the flow of text (block and inline, start and end) instead of physical directions, so the same CSS works for right-to-left languages such as Arabic and Hebrew, and for vertical writing. Paste physical CSS and every declaration is converted wherever it sits, including several on one line: margin-left becomes margin-inline-start, top becomes inset-block-start, width becomes inline-size, and text-align, float and clear values of left/right become start/end.
Shorthands are expanded too: padding: 8px 16px 12px becomes padding-block: 8px 12px; padding-inline: 16px, and a multi-value border-radius becomes the four corner properties. A single-value shorthand such as margin: 0 is left alone, because it’s already the same on every side. The conversion assumes your original CSS was written for left-to-right, horizontal text, which is almost always the case. Selectors and media queries are never changed.