# abs()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

## Syntax

``````/* 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-constant>  |  ( <calc-sum> )   <calc-constant> =   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.

``````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.

``````div {
--deg: -45deg;
}
``````

### 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:

``````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

BCD tables only load in the browser