Numbers and arithmetic
Use +, -, *, /, parentheses, and numeric ^. A plain value such as 24 compiles to 24px while keeping 24 in the field.
Components
Expression
Author a typed length expression, then press Enter or move focus away to compile it to CSS.
Length
Plain numbers use pixels. Use x or Mixed for the current value, or author CSS math and variables directly. Place the caret on a number and press the arrow keys to adjust it; hold Shift for increments of ten.
- Expression
- 24
- CSS output
Explore presets
Apply an example, then edit the compiled result in the field above.
Length expression reference
Closed calculations simplify immediately. Expressions containing relative units, percentages, variables, or environment values stay symbolic and compile to valid CSS math.
Current value equations
Prefix an operator to modify the current value: +10, -20, *2, /4, or ^2. Use x, 𝑥, or Mixed inside longer equations.
Place the caret anywhere on a numeric token—including its unit— and use Arrow Up or Arrow Down to adjust it. Hold Shift to use the larger configured step.
CSS math functions
Use calc(), min(), max(), clamp(), round(), mod(), rem(), abs(), hypot(), or random(). A closed call such as pow(24, 2) inherits the field's pixel unit; symbolic number results can scale a length when multiplied by one.
References and percentages
Write var(token) without CSS's leading double dash. It becomes an editable token chip and compiles to var(--token). Combine variables, env(...), and % with length values; the browser resolves them using layout and cascade context.
Supported length units
- Absolute
- px, cm, mm, q, in, pc, pt
- Font-relative
- em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh
- Viewport
- vw, vh, vi, vb, vmin, vmax and their sv*, lv*, and dv* variants
- Container
- cqw, cqh, cqi, cqb, cqmin, cqmax
random() is an evolving CSS feature and may require a newer browser. The compiler preserves it as CSS rather than choosing a random value while authoring.