Convert CSS and HTML between LTR and RTL in one click. Flip directional properties and Tailwind classes, optionally set dir attribute.
.card {
margin-left: 16px;
padding-right: 12px;
text-align: left;
}
.card {
margin-right: 16px;
padding-left: 12px;
text-align: right;
}
Flip directional CSS properties and Tailwind utilities. Optionally set dir attribute for HTML documents.
Margin/Padding/Border left↔right, text-align, float/clear, position left/right, direction
Flip common directional utilities like ml/mr, pl/pr, border-l/r, rounded-l/r, text-left/right
Set documentdir="rtl"attribute and convert inline styles and legacy align attributes
Supporting right-to-left languages (Arabic, Hebrew, Persian, Urdu) is a common requirement for any product that goes international, but the CSS is counterintuitive: left and right flip, text-align flips, but margin and padding do not, and logical properties (inset-inline-start) replace physical ones. Hand-converting a stylesheet is slow and invites subtle bugs. This converter takes your CSS and produces a correct RTL variant automatically.
It maps physical properties to their logical equivalents, flips directional properties where required, and leaves non-directional ones untouched - which is the part that trips up manual conversions. The output is a clean CSS block you can load with a dir=rtl media query or a separate stylesheet, so the same markup serves both LTR and RTL users.
Modern CSS has logical properties (margin-inline-start, inset-block-end) that are direction-aware by definition - they flip automatically between LTR and RTL. Wherever the converter can replace a physical property (margin-left) with its logical equivalent (margin-inline-start), it does, because that is the most maintainable output. Where no logical equivalent exists, it produces the explicit flipped value.