abs()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The abs() CSS function returns the absolute value of the argument, as the same type as the input.

Syntax

css
/* property: abs(expression) */
width: abs(20% - 100px);

Parameters

The abs(x) function accepts only one value as its parameter.

x

A calculation which resolves to a number.

Return value

The absolute value of x.

  • if x's numeric value is positive or 0⁺, return x.
  • Otherwise, returns -1 * x.

Formal syntax

<abs()> = 
abs( <calc-sum> )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Examples

Positive variables

The abs() function can be used to ensure that a value is always positive. In the following example a CSS custom property --font-size is used as the value of font-size. Wrapping this custom property in abs() will convert a negative value to a positive one.

css
h1 {
  font-size: abs(var(--font-size));
}

Control gradient angle of direction

You can also control the gradient direction using abs() function. In the following example, with an angle of -45deg the gradient would start red and transition to blue. By using abs() to make the value positive, the gradient will start blue and transition to red.

css
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

Backwards compatible fallback

In older browsers that lack the support for CSS abs() function, you can use the CSS max() function to achieve the same result, as shown below:

css
p {
  line-height: max(var(--lh), -1 * var(--lh));
}

We use the max() function to return the largest (most positive) value from a list of two values: var(--lh) or -1 * var(--lh). Irrespective of whether --lh is positive or negative, the calculated return value will always be positive, that is, an absolute number.

Specifications

Specification
CSS Values and Units Module Level 4
# sign-funcs

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
abs()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

See also