CSS Logical Properties Converter
Convert margin-left, padding-top, width and the rest into logical equivalents that follow the writing direction, so a layout works in right-to-left languages without a separate stylesheet.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Left stops meaning left
In a right-to-left language the reading direction reverses, so a margin intended to sit after an element belongs on its left rather than its right. Stylesheets written with physical properties need a mirrored copy for those languages, which historically meant maintaining two versions or running a flipping tool over the output. Logical properties describe position relative to the reading direction instead, so a single stylesheet works in both without any duplication.
Inline and block replace left, right, top and bottom
The inline axis runs along the text direction and the block axis runs across it. In English, inline-start is left and block-start is top; in Arabic or Hebrew, inline-start is right; in vertical Japanese both axes rotate. Writing margin-inline-start instead of margin-left means the intent survives the change of direction, and the intent was almost always "the side the text starts on" rather than "the left".
What not to convert
Some properties should stay physical. A drop shadow offset, a background position tied to an image, and anything positioned to match a physical illustration all mean the direction they say. Converting those breaks the design in right-to-left rather than fixing it. The rule is whether the value follows the text: spacing and alignment do, and decoration keyed to a picture does not.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What do inline and block mean?
Inline runs along the text direction and block runs across it. In English, inline-start is left and block-start is top. In Arabic, inline-start is right. In vertical Japanese writing, both axes rotate.
Do I still need a right-to-left stylesheet?
Not for spacing and alignment, which is most of it. Setting dir on the html element is then enough, and the same rules produce a correctly mirrored layout without a second file.
Are logical properties well supported?
Yes, in every current browser. The individual properties such as margin-inline-start have been supported for years; the shorthands like margin-inline are newer and also widely available now.
Which properties should stay physical?
Anything whose direction does not follow the text: shadow offsets, background positions tied to an image, and decoration matched to a physical illustration. Converting those breaks right-to-left rather than fixing it.
What is the shorthand for both sides?
margin-inline sets both inline sides and margin-block sets both block sides, each taking one or two values. margin-inline: auto is the modern way to centre a block horizontally.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste CSS using physical properties to convert it to logical equivalents.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.