Tools
Logical Properties Converter
Left and right are a guess about the reader’s language. Start and end are not. Paste your CSS and get the version that is correct in every writing direction, with a list of exactly what changed.
Widely availablesince Mar 2024
Sizes are off by default: for most layouts width really does mean width. Turn it on for components that must work in vertical writing modes.
Inline and block, start and end
The inline axis is the direction text runs; the block axis is the direction
paragraphs stack. In English that is left-to-right and top-to-bottom, so margin-inline-start is
the left margin. In Arabic it is the right one, with no extra CSS. margin-inline and
padding-block set both ends of an axis at once, which is why margin-inline: auto is
the modern way to centre a block.
What the converter leaves alone, and why
Four-value shorthands like padding: 12px 20px 12px 8px are always physical, so an asymmetric one
is expanded into logical longhands, and a symmetric one is left because it is already direction-neutral.
box-shadow offsets, transform and background-position are not touched:
light falls from the same side in every language. Check the report before you paste.
Support
The badge above comes from the browser dataset at build time. These properties have been everywhere for years, so this conversion needs no fallback. A live right-to-left demo is on the feature page.