abs()

The abs() function's syntax is as follows:

abs( <calc-sum>)

The parameter is:

<calc-sum>

An expression, or calculation, which resolves to a <number>, <length>, <percentage> or a unsupported templ: cssxref("calc_keyword"). ### return value the absolute value of ``. _ if ``'s numeric value is positive or `0⁺`, return ``. _ otherwise, returns `_1 * `. ## formal syntax {{

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 browsers that lack support for CSS abs() function, you can use the CSS max() function to achieve the same result:

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()