CSS Calc Playground
Test and preview CSS calc() expressions in real-time. Experiment with mixed units like px, %, rem, vw. See the computed result live. Copy the CSS code. Free online tool.
Examples
Preview
Reference
What is CSS calc()?
The calc() CSS function lets you perform calculations when specifying CSS property values. It's particularly useful for mixing different units, such as percentages and pixels.
Supported units
You can mix any CSS length units inside calc(): px, %, em, rem, vw, vh, vmin, vmax, and more. Operators +, -, *, / are supported.
Common patterns
calc(100% - 2rem) — full width minus fixed padding. calc(100vh - 80px) — viewport height minus header. calc(50% + 1rem) — half width plus offset. calc(100% / 3) — one third of container.
Privacy
All calc() testing runs 100% in your browser. No data is sent to any server.