abs() & sign() CSS Math Functions Demo

The abs() CSS function returns the absolute value of its argument. It's part of the CSS Values and Units Module Level 4 specification. Regardless of whether the input is positive or negative, abs() always returns a non-negative value. This is particularly useful when working with CSS custom properties where you need to ensure a value (like a length, percentage, or number) is always positive — for example, in calc() expressions, shadow blur radii, or spacing calculations.

Example: abs(-35px) returns 35px; abs(20) returns 20.

The sign() CSS function returns the sign of its argument: 1 if the value is positive, -1 if negative, and 0 if the value is exactly zero. This function is extremely useful for determining directionality in CSS — you can multiply it with other values in calc() to flip orientations, control rotation direction, or create responsive layout adjustments based on the sign of a custom property.

Example: sign(-35) returns -1; sign(50px) returns 1; sign(0) returns 0.

As of 2024, Chrome 123+ and Edge 123+ fully support both abs() and sign(). Firefox support is in active development (tracked in Bug 1850489). Safari support is also under development. These functions are part of the CSS Values Level 4 spec. For broader compatibility, always provide fallback values using traditional CSS or use @supports queries to detect support:

You can freely nest abs() and sign() inside calc() expressions. This allows powerful dynamic computations. Here are practical examples:

• Shadow management: Use abs() to guarantee blur and spread radii are positive, preventing rendering issues.
• Bidirectional animations: Combine sign() with animation to flip direction based on a variable's sign.
• Responsive spacing: Ensure margins/padding derived from calculations never go negative.
• Gradient positioning: Use abs() to handle color stop positions that might otherwise fall outside valid ranges.
• Custom property math: Build complex design tokens that adapt based on whether a base value is positive or negative.
• Transform control: Use sign() to conditionally apply or reverse rotations and translations.

Yes! Both functions preserve the unit of their input. abs(-50px) returns 50px, and sign(-3em) returns -1 (unitless, since sign always returns a number). They work with all CSS dimension units (px, em, rem, %, vh, vw, etc.), as well as unitless numbers, angles (deg, rad), and time values (s, ms). The key rule: the output unit matches the input unit for abs(), while sign() always returns a unitless <number>.

The power of abs() comes from its ability to work with dynamic values. When you're dealing with CSS custom properties (var(--something)) that might be set programmatically via JavaScript or change based on media queries/container queries, you can't predict whether the value will be positive or negative. abs() guarantees a non-negative result regardless of the input. This is essential for building robust, dynamic design systems where values flow through calculations and you need to enforce constraints like "this spacing must never be negative."