CSS Logical Properties Converter

Convert physical CSS (margin-left, padding-top, border-right) to logical equivalents (margin-inline-start, padding-block-start, border-inline-end) so layouts adapt to RTL languages and vertical writing modes automatically.

⚙️ Options

Collapse to shorthands (margin-block, inset) Keep selectors and braces Reverse: logical → physical

📝 CSS Source

Input0 lines

Output0 lines

👀 Direction Preview

Same converted CSS, two writing directions. Logical properties flip naturally with dir="rtl".

LTR

RTL

📋 Mapping Reference

Physical	Logical (writing-mode aware)

inline axis runs left-to-right (or right-to-left in RTL). block axis runs top-to-bottom (or sideways in vertical writing modes). start/end replace left/right and top/bottom relative to direction.