abs()
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
.
Syntax
/* property: abs(expression) */
width: abs(20% - 100px);
The abs()
function takes only one expression as its argument.
Formal syntax
No syntax available: No value found in the database.
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;
background-image: linear-gradient( abs( var( --deg ) ), blue, red);
}
Specifications
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.