CSS calc() Generator
Visually construct and test mixed-unit CSS calc() expressions with instant preview.
Expression Builder
Additional Operations
Live Visual Preview
Parent Container (100% = full width)
calc(100% - 32px)
CSS calc() Statement
css
width: calc(100% - 32px);How It Works
The CSS calc() function allows mathematical operations directly in property values, mixing different CSS units together:
- Whitespace Rule: In standard CSS, the
+and-operators must always be surrounded by whitespace (e.g.calc(100% - 32px), nevercalc(100%-32px)). - Multiplication & Division: In
*and/operations, at least one of the arguments must be unitless.
Related Frontend Tools
Core
CSS Unit Converter
Convert rem, px, em, viewport, and physical CSS dimensions with real-time accuracy.
Popular
Color Converter
Bidirectional color conversion across HEX, RGB, RGBA, HSL, HSLA, HSV, and OKLCH.
WCAG
Color Contrast Checker
Calculate WCAG 2.1 contrast ratios and verify accessibility compliance for normal text, large text, and UI components.