CSS Logical Properties Converter
Free, 100% client-side.
Loading tool...
What is CSS Logical Properties Converter?
The CSS Logical Properties Converter transforms physical CSS declarations like margin-top and padding-left into their logical equivalents like margin-block-start and padding-inline-start, following the CSS Logical Properties and Values specification. It also converts back to physical properties, resolving axes according to your chosen writing mode and text direction so LTR/RTL mirroring and vertical scripts map correctly.
Key Benefits
- Write one stylesheet that works in both left-to-right and right-to-left languages.
- Adapt layouts to vertical writing modes without extra rules.
- Modernize legacy CSS to spec-compliant logical properties.
- Convert logical properties back to physical for older browser support or tooling.
Common Use Cases
- •Localizing a design system for Arabic or Hebrew markets.
- •Building multilingual sites that share one CSS codebase.
- •Refactoring legacy stylesheets to modern logical properties.
- •Learning how block and inline axes map in different writing modes.
How to Use CSS Logical Properties Converter
- Paste your CSS: Paste the physical CSS declarations you want to convert, such as margin-left: 12px; or padding-top: 16px;.
- Choose conversion mode: Select Physical to Logical to modernize your CSS, or Logical to Physical to generate a fallback for older tooling.
- Set writing mode and direction: Pick horizontal-tb, vertical-rl, or vertical-lr, then choose LTR or RTL so inline start/end resolve correctly.
- Copy the result: Review the converted declarations and click Copy to paste them back into your stylesheet.
Key Features
- Two-way conversion: physical properties to logical and back again.
- Supports margin, padding, border, and inset longhand properties.
- Writing-mode aware: horizontal-tb, vertical-rl, and vertical-lr.
- Direction aware: flips inline-start/inline-end for LTR vs RTL.
- Handles corner radii like border-top-left-radius to border-start-start-radius.
- Flags shorthand declarations that need manual expansion first.
Frequently Asked Questions
What are CSS logical properties?
Logical properties like margin-inline-start and padding-block-end reference the flow of text (inline and block axes) instead of physical sides (left/right/top/bottom), so one rule adapts to any writing mode or direction.
When should I use margin-inline-start instead of margin-left?
Use logical properties whenever a layout should mirror in RTL languages (Arabic, Hebrew) or adapt to vertical writing modes. For purely physical decorations (a shadow on the literal left edge), physical properties remain fine.
Does the converter handle shorthand properties like margin: 0 auto?
No. Shorthands such as margin, padding, and inset expand differently per axis, so the tool passes them through and flags them. Expand them to longhand (e.g. margin-top, margin-inline) first for an exact mapping.
Is the conversion done in my browser?
Yes. All parsing and conversion run entirely client-side in JavaScript. Your CSS never leaves your machine, making it safe for proprietary or sensitive stylesheets.