abs()

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

x

A calculation which resolves to a number.

The absolute value of x.

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

<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

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.

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

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.

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

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:

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.

• sign()