LTR to RTL CSS converter
Flip left and right in CSS for Arabic layouts, or switch to logical properties.
FreeRuns in your browserNo signupUpdated 2026-11-05
Put /* rtl:ignore */ before a declaration or selector to leave it as it is, for example a logo or a phone number.
Declarations
16
read
Changed
13
flipped
Warnings
0
need a manual look
.card {
float: right;
margin: 0 8px 0 24px;
padding-right: 16px;
border-right: 4px solid #25d366;
border-radius: 0 12px 12px 0;
text-align: right;
}
.card .badge {
position: absolute;
top: 12px;
right: 12px;
transform: translateX(50%);
box-shadow: -4px 2px 8px rgba(0, 0, 0, 0.2);
}
.menu a:hover {
margin-left: auto;
transition: margin-right 0.2s ease;
}
@media (min-width: 768px) {
.sidebar { left: 0; background: url(arrow-left.svg) no-repeat right center; }
}
.logo { /* rtl:ignore */ float: left; }
What changed
| Selector | Before | After |
|---|---|---|
| .card | float: left | float: right |
| .card | margin: 0 24px 0 8px | margin: 0 8px 0 24px |
| .card | padding-left: 16px | padding-right: 16px |
| .card | border-left: 4px solid #25d366 | border-right: 4px solid #25d366 |
| .card | border-radius: 12px 0 0 12px | border-radius: 0 12px 12px 0 |
| .card | text-align: left | text-align: right |
| .card .badge | left: 12px | right: 12px |
| .card .badge | transform: translateX(-50%) | transform: translateX(50%) |
| .card .badge | box-shadow: 4px 2px 8px rgba(0, 0, 0, 0.2) | box-shadow: -4px 2px 8px rgba(0, 0, 0, 0.2) |
| .menu a:hover | margin-right: auto | margin-left: auto |
| .menu a:hover | transition: margin-left 0.2s ease | transition: margin-right 0.2s ease |
| .sidebar | right: 0 | left: 0 |
| .sidebar | background: url(arrow-left.svg) no-repeat left center | background: url(arrow-left.svg) no-repeat right center |
Icons that point a direction (arrows, chevrons, progress) usually need mirroring too; logos, media controls and clocks do not. CSS can't tell them apart, so check those by eye.
About this tool
How it works and how to read the result.
Need this done for you?
Arabic & multilingual websites
English and Arabic websites with proper right-to-left layouts.
See the serviceWhat it does
This converter takes a left-to-right stylesheet and makes it work for right-to-left languages such as Arabic. It has two modes.
Mirror writes a flipped copy. margin-left becomes margin-right, float: left becomes float: right, four-value shorthands such as margin: 0 24px 0 8px swap their right and left values, border-radius corners swap sides, translateX(-50%) becomes translateX(50%), shadows move to the other side, background positions flip, and resize cursors and direction swap. Transition property lists are updated too, so transition: margin-left still animates the flipped property.
Logical replaces physical properties with flow-relative ones: margin-inline-start, padding-inline-end, inset-inline-start for left, border-start-start-radius for the top-left corner, float: inline-start and text-align: start. Four-value shorthands with different left and right values become margin-block and margin-inline pairs. The browser then places everything according to the page's dir attribute.
How to use it
- Paste your CSS, minified or formatted. Media queries,
@supportsand keyframes are handled. - Choose Mirror or Logical.
- Tick "Also flip rotate() and skew()" only if the rotated elements are mirrored as a whole.
- Add
/* rtl:ignore */before anything that must not flip, and convert again. - Copy or download the result.
How to read the result
"Declarations" is how many properties were read; "Changed" is how many were rewritten. The "What changed" table lists each one with its selector, so you can review the conversion line by line.
In logical mode, the third stat counts override rules. These are values with no logical form, written under a [dir="rtl"] selector at the end of the output and wrapped in the same media queries as the original. A transform inside @keyframes can't be overridden that way, so it is listed under "Check by hand"; make a mirrored copy of that animation.
The tool only changes CSS. Icons that point a direction, such as arrows and chevrons, need swapping or transform: scaleX(-1), while logos, clocks and play buttons stay as they are. Text that should always run left to right, like code or phone numbers, needs dir="ltr" in the HTML.
To tidy the result, run it through the CSS minifier and beautifier. Building English and Arabic layouts from one codebase is the core of our Arabic and multilingual website service.
Questions
Frequently asked.
Should I mirror my CSS or switch to logical properties?
Logical properties are the long-term fix: one stylesheet serves English and Arabic, and nothing needs regenerating when you edit it. A mirrored copy is quicker for an existing site where you can't touch the original CSS, but you then maintain two files. You can mirror now and move to logical properties during the next redesign.
Why are some values left alone in logical mode?
Some CSS has no flow-relative form: transforms such as translateX, shadows, background positions and resize cursors. In logical mode the tool keeps the original and writes a [dir="rtl"] override with the mirrored value, listed at the end of the output.
How do I stop the tool flipping something?
Put the comment /* rtl:ignore */ before the declaration, or before a selector to skip the whole rule. Use it for logos, phone numbers, media controls and anything that should look the same in both directions.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide