Paste CSS declarations, pick a writing mode and a direction, and read the flow-relative equivalent line by line. Declarations the converter does not rewrite are kept as they are and counted in the status line.
Runs locally in your browserThe workbench reads a list of CSS declarations and rewrites the physical ones it can express for the writing mode you pick. Every supported side, size and alignment keyword becomes its flow-relative equivalent, and the panel shows exactly the text that Copy CSS puts on the clipboard.
Everything happens in the page: the declarations are parsed by the bundle that ships with the page, no request carries your CSS anywhere, and the tool keeps working when the network drops. Values are never rewritten — the converter swaps the property name and, for text-align and float, the keyword — so a calc(), a colour or a relative unit arrives in the output untouched.
Sides are resolved through the writing mode and the direction. In horizontal-tb with ltr, margin-left becomes margin-inline-start, padding-top becomes padding-block-start and border-right-width becomes border-inline-end-width; switch the direction to rtl and margin-left becomes margin-inline-end. In vertical-rl (vertical writing) margin-left becomes margin-block-end and padding-top becomes padding-inline-start. The same table drives margin, padding, the three border parts (width, style and colour) and the four inset properties top, right, bottom and left, which become inset-block-start, inset-inline-end and so on. text-align: left is rewritten to start in ltr and to end in rtl; float: right becomes inline-end in ltr and inline-start in rtl.
Sizes follow the same logic: width, min-width and max-width become inline-size, min-inline-size and max-inline-size in horizontal writing, and block-size, min-block-size and max-block-size in vertical writing, while the height family moves to the other axis. The value is copied character for character, including a trailing !important, so margin-left: 10px !important becomes margin-inline-start: 10px !important.
Shorthands are not split: margin, padding, border, border-left and inset stay exactly as written, because splitting one safely needs the whole cascade. Properties that are already logical (margin-inline-start, block-size), custom properties such as --tokens, at-rules, selectors and the braces of a rule block are echoed back and counted as not converted — nothing is deleted. Comments written as /* … */ are stripped, and a declaration with no value at all (margin-left:) is kept as it stands.
The reader understands that a semicolon can belong to a value: background-image: url(data:image/svg+xml;base64,…) survives whole, and so does content: "a;b". text-align: justify, start and end, colour values, calc() expressions and every unit arrive unchanged. Because only property names (and the two keyword cases) are edited, the output is ready to paste into a stylesheet — but the indentation of a pasted block is not preserved, since the result is one declaration per line.
The counters describe the current run: “6 converted declarations” means six physical properties were rewritten, and the second number counts the chunks that were passed through, such as shorthands, already-logical properties and at-rules. An empty box shows no counter at all. With the fallback switch on, every converted rule is printed twice — physical line first — so browsers without logical property support keep working.
The stage is a schematic, not a rendering of your CSS: it draws the four logical axes and a card whose writing-mode and direction follow the selectors. Use it to confirm which physical side a logical keyword refers to before you paste the output, then check the result in the browser inspector on the real element, because inherited constraints in a flex or grid container can change what a value does.