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

The abs(A) statement will return A if A's numeric value is positive or 0⁺. Otherwise it will return the value of -1 * A.


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

The abs() function takes only one expression as its argument.

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 |


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;
  background-image: linear-gradient(abs(var(--deg)), blue, red);


No specification found

No specification data found for css.types.abs.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

No compatibility data found for css.types.abs.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.