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
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 or0⁺
, returnx
. - Otherwise, returns
-1 * x
.
Formal syntax
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
BCD tables only load in the browser