CSS calc() generator

What is CSS calc() for?

calc() lets you do maths with different units in CSS: the full width minus a fixed sidebar, the viewport height minus a header, a font size that adds a rem base and a vw part. It solves layouts that would otherwise need JavaScript, but it has strict rules, and an invalid expression is silently ignored by the browser, so the declaration just does nothing.

This generator builds the expression from terms and operators. Each term is a value with a unit (px, rem, em, %, vw, vh, vmin, vmax or ch), joined with +, -, * or /. It checks the rules as you go: spaces around + and -, and a unitless number on one side of every multiplication and division. If something is wrong, it tells you what.

It also shows what the expression computes to in pixels for a context you define: the parent width (which % refers to for width, margin and padding), the viewport size, and the root and element font sizes. Choose the CSS property you are writing (width, height, margin, padding, font-size, top and others), because the meaning of % depends on it. Presets cover the classic cases: full width minus sidebar, centered column, full height minus header and fluid padding.

Seeing the computed value is the quickest way to catch mistakes, such as a % that refers to the parent height when you expected the width, or an em that is relative to a different font size than you thought. The generator runs in your browser and is free to use without limits: no sign-up and no Pro needed.

How to build a calc() expression

1. 1Start from a preset or add your first term (value and unit).
2. 2Add more terms with + - * or / operators.
3. 3Choose the CSS property and set the context: parent width, viewport, root and element font size.
4. 4Fix any rule error shown and check the computed px result.
5. 5Copy the CSS declaration.

Common calc() patterns

• Content width next to a fixed sidebar: width: calc(100% - 280px).
• Full height below a header: height: calc(100vh - 64px).
• A centered column with side gutters: calc(100% - 2rem).
• Fluid padding that combines rem and vw.
• Equal columns with gaps: calc((100% - 2 * 16px) / 3).
• Positioning an element at the centre minus half its size.

calc() rules that trip people up

• + and - need spaces on both sides: calc(100% - 20px) works, calc(100%-20px) is invalid.
• * needs a unitless number on at least one side: calc(2 * 1rem) is valid, calc(2px * 1rem) is not.
• / needs a unitless number on the right: calc(100% / 3) is valid, calc(100px / 2px) is not.
• Dividing by zero makes the declaration invalid.
• Nested parentheses are allowed: calc((100% - 32px) / 3).

What % means depends on the property

For width, and for margin and padding on any side, % refers to the width of the containing block. For height and top/bottom it refers to its height. For font-size it refers to the parent's font size. That is why the generator asks for the property: the same calc(50% + 1rem) gives different pixels in each case.

Frequently Asked Questions