CSS Values and Units | CSS Features

`interpolate-size`

Property Limited availability Experimental Modern CSS: interpolate-size

MDN The interpolate-size CSS property allows you to enable animations and transitions between a <length-percentage> value and an intrinsic size, fit-content, or max-content.

Live preview Example from MDN

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 175px;
  border-radius: 5px;
  background: #eeeeee;
  box-shadow:
    inset 1px 1px 4px rgb(255 255 255 / 0.5),
    inset -1px -1px 4px rgb(0 0 0 / 0.5);
}

header {
  padding: 0.7rem;
  border-bottom: 2px solid #cccccc;
}

main {
  padding: 10px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p,
li {
  font-size: 0.8rem;
  line-height: 1.5;
}

p {
  margin-top: 0;
}

:root {
  interpolate-size: allow-keywords;
}

section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: max-content;
}

<section tabindex="0">
  <header>
    <h2>Tanuki</h2>
  </header>
  <main>
    <p>Tanuki is the silent phantom of MDN.</p>
    <ul>
      <li><strong>Height</strong>: 3.03m</li>
      <li><strong>Weight</strong>: 160kg</li>
      <li><strong>Tech Fu</strong>: 7</li>
      <li><strong>Bad Jokes</strong>: 9</li>
    </ul>
  </main>
</section>

Syntax

numeric-only | allow-keywords

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: numeric-only
Applies to: all elements
Inherited: yes
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: not animatable

Browser support

First browser version supporting interpolate-size
Chrome	129
Edge	129
Firefox	No
Safari	No
Chrome Android	129
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`abs()`

Function Baseline: newly availablesince June 2025 Modern CSS: abs() and sign()

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

Syntax

abs( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting abs()
Chrome	138
Edge	138
Firefox	118
Safari	15.4
Chrome Android	138
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`acos()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The acos() CSS function is a trigonometric function that returns the inverse cosine of a number between -1 and 1. The function contains a single calculation that returns an angle between 0deg and 180deg.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

Syntax

acos( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting acos()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`asin()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The asin() CSS function is a trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns an angle between -90deg and 90deg.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(asin(1));
}
div.box-2 {
  transform: rotate(asin(0.5));
}
div.box-3 {
  transform: rotate(asin(0));
}
div.box-4 {
  transform: rotate(asin(-0.5));
}
div.box-5 {
  transform: rotate(asin(-1));
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

Syntax

asin( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting asin()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`atan()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The atan() CSS function is a trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns an angle between -90deg and 90deg.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

Syntax

atan( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting atan()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`atan2()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The atan2() CSS function is a trigonometric function that returns the inverse tangent of two values between -infinity and infinity. The function accepts two arguments and returns an angle between -180deg and 180deg, without implying any specific unit such as radians.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan2(3, 2));
}
div.box-2 {
  transform: rotate(atan2(3%, -2%));
}
div.box-3 {
  transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
  transform: rotate(atan2(1, 0.5));
}
div.box-5 {
  transform: rotate(atan2(1rem, -0.5rem));
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

Syntax

atan2( <calc-sum>, <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting atan2()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`attr()`

Function Baseline: widely availablesince January 2018 Modern CSS: attr()

Spec The attr() function substitutes the value of an attribute on an element into a property, similar to how the var() function substitutes a custom property value into a function.

MDN The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned.

Live preview Example from MDN

blockquote {
  margin: 1em 0;
}

blockquote::after {
  display: block;
  content: " (source: " attr(cite) ") ";
  color: hotpink;
}

<blockquote cite="https://mozilla.org/en-US/about/">
  Mozilla is working to put control of the internet back in the hands of the
  people using it.
</blockquote>

<blockquote cite="https://web.dev/about/">
  Build beautiful, accessible, fast, and secure websites that work
  cross-browser.
</blockquote>

Syntax

attr( <attr-name> <attr-type>? , <declaration-value>?)

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting attr()
Chrome	2
Edge	12
Firefox	1
Safari	3.1
Chrome Android	18
Safari iOS	2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`calc-interpolate()`

Function Not in any browser yet

Spec The calc-interpolate() interpolation notation represents an interpolated numeric or dimensional value. Like calc(), it is a math function, with the following syntax:

Syntax

calc-interpolate( [ <progress-source> && [ by <easing-function> ]? && <easing-function>? ] , <input-position>{1,2} : <calc-sum> , [ <easing-function>? , <input-position>{1,2} : <calc-sum> ]#? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`calc-mix()`

Function Not in any browser yet

Spec The calc-mix() mix notation represents a weighted average of numeric or dimensional value. Like calc(), it is a math function, with the following syntactic form:

Syntax

calc-mix( [ <calc-sum> <percentage [0,100]>? ]# )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`calc-size()`

Function Limited availability Experimental Modern CSS: calc-size()

Spec The calc-size() function allows math and transition/animation to be performed on these sizes in a safe, well-defined way. Its syntax is as follows:

MDN The calc-size() CSS function allows you to perform calculations on intrinsic size values such as auto, fit-content, and max-content; this is not supported by the regular calc() function.

Live preview Example from MDN

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  border: 1px solid black;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p {
  font-size: 0.8rem;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: calc-size(fit-content, size + 6rem);
  height: calc-size(auto, size * 2);
}

<section>
  <h2>Favorite quote</h2>

  <p>
    Fashion is something so ugly it has to be changed every fifteen minutes.
  </p>
</section>

Syntax

calc-size( <calc-size-basis>, <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting calc-size()
Chrome	129
Edge	129
Firefox	No
Safari	No
Chrome Android	129
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`calc()`

Function Baseline: widely availablesince January 2018 Modern CSS: Relative colors

Spec The calc() function is a math function that allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses.

MDN The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, angle, <time>, <percentage>, <number>, <integer>, and <color-function> values.

Live preview Example from MDN

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change my width.</div>
</section>

Syntax

calc( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting calc()
Chrome	26
Edge	12
Firefox	16
Safari	7
Chrome Android	28
Safari iOS	7

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`clamp()`

Function Baseline: widely availablesince January 2023

Spec The clamp() function takes three calculations—a minimum value, a central value, and a maximum value—and represents its central calculation, clamped according to its min and max calculations, favoring the min calculation if it conflicts with the max. (That is, given clamp(MIN, VAL, MAX), it represents exactly the same value as max(MIN, min(VAL, MAX))).

MDN The clamp() CSS function clamps a value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

Live preview Example from MDN

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    The font-size of this text varies depending on the base font of the page,
    and the size of the viewport.
  </div>
</section>

Syntax

clamp( [ <calc-sum> | none ], <calc-sum>, [ <calc-sum> | none ] )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting clamp()
Chrome	79
Edge	79
Firefox	75
Safari	13.1
Chrome Android	79
Safari iOS	13.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`color-interpolate()`

Function Not in any browser yet

Spec The color-interpolate() interpolation notation represents an interpolated <color> value, with the following syntax:

Syntax

color-interpolate( [ <progress-source> && [ by <easing-function> ]? && <easing-function>? && <color-interpolation-method>? ] , <input-position>{1,2} : <color>, [ [ <easing-function> || <color-interpolation-method> ]?, <input-position>{1,2} : <color> ]#? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`cos()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The cos() CSS function is a trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an angle by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same value, approximately 0.707.

Live preview Example from MDN

:root {
  --radius: 140px;
  --dot-size: 10px;
}
.circle {
  display: grid;
  place-content: center;
  margin: 0 auto;
  width: calc(var(--radius) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-image:
    radial-gradient(black var(--dot-size), transparent var(--dot-size)),
    linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
  display: block;
  width: var(--dot-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-color: #ff6666;
  transform: translateX(calc(cos(0deg) * var(--radius)))
    translateY(calc(sin(0deg) * var(--radius) * -1));
}

<div class="circle">
  <span class="dot" id="example-element"></span>
</div>

Syntax

cos( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting cos()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`cross-origin()`

Function Not in any browser yet

Spec <cross-origin-modifier> = cross-origin(anonymous | use-credentials)

Defined for

<request-url-modifier>

This feature only appears in the context of these properties, functions or types.

Specification ↗

`cycle()`

Function Not in any browser yet

Spec The cycle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.

Syntax

cycle( <whole-value># )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`exp()`

Function Baseline: widely availablesince June 2026 Modern CSS: Exponential functions (CSS)

MDN The exp() CSS function is an exponential function that takes a number as an argument and returns the mathematical constant e raised to the power of the given number.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); /* 0.3678794411714423turn */
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); /* 0.4723665527410147turn */
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); /* 0.6065306597126334turn */
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); /* 0.7788007830714049turn */
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); /* 1turn */
}

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

Syntax

exp( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting exp()
Chrome	120
Edge	120
Firefox	118
Safari	15.4
Chrome Android	120
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`first-valid()`

Function Not in any browser yet

Spec The first-valid() functional notation inlines the fallback behavior intrinsic to parsing declarations. Unlike most notations, it can accept any valid or invalid syntax in its arguments, and represents the first value among its arguments that is supported (parsed as valid) by the UA as the whole value of the property it’s used in.

Syntax

first-valid( <declaration-value># )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`hypot()`

Function Baseline: widely availablesince June 2026 Modern CSS: Exponential functions (CSS)

MDN The hypot() CSS function is an exponential function that returns the square root of the sum of squares of its parameters.

Live preview Example from MDN

:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /*  100px */
  --size-2: hypot(var(--size-0), var(--size-0)); /*  141.42px */
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /*  250px */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">250px</div>
</div>

Syntax

hypot( <calc-sum># )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting hypot()
Chrome	120
Edge	120
Firefox	118
Safari	15.4
Chrome Android	120
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`ident()`

Function Not in any browser yet

Spec The ident() function represents an arbitrary <ident>, built from one or more separate idents, strings, and integers. It is an arbitrary substitution function.

Syntax

ident( <ident-arg>+ )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`if()`

Function Limited availability Experimental Modern CSS: Range syntax for style queries Modern CSS: if()

Spec The if() function is an arbitrary substitution function that represents conditional values. Its argument consists of an ordered semi-colon–separated list of statements, each consisting of a condition followed by a colon followed by a value. An if() function represents the value corresponding to the first condition in its argument list to be true; if no condition matches, then the if() function represents an empty token stream.

MDN The if() CSS function allows different values to be set for a property depending on the result of a conditional test. The test can be based on a style query, a media query, or a feature query.

Live preview Example from MDN

html {
  height: 100%;
  font-family: sans-serif;
}

body,
section {
  height: inherit;
}

h2 {
  text-align: center;
}

article {
  background-color: cyan;
  border: 3px solid gray;
  flex: 1;
}

section {
  display: flex;
  gap: 16px;
  flex-direction: if(
    media(orientation: landscape): row;
    else: column;
  )
}

h2::before {
  content: if(
    style(--show-apple: true): "🍎 ";
  );
}

h2 {
  color: if(
    supports(color: lch(29.57% 43.25 344.44)): lch(29.57% 43.25 344.44);
    else: #792359;
  )
}

<section style="--show-apple:true">
  <article><h2>First article</h2></article>
  <article><h2>Second article</h2></article>
</section>

Syntax

if( [ <if-branch> ; ]* <if-branch> ;? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting if()
Chrome	137
Edge	137
Firefox	No
Safari	No
Chrome Android	137
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`inherit()`

Function Not in any browser yet

Spec Like the inherit keyword, the inherit() functional notation resolves to the computed value of a property on the parent. Rather than resolving to the value of the same property, however, it resolves to a sequence of component values representing the computed value of the property specified as its first argument. Its second argument, if present, is used as a fallback in case the first argument resolves to the guaranteed-invalid value.

Syntax

inherit( <custom-property-name>, <declaration-value>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`integrity()`

Function Not in any browser yet

Spec <integrity-modifier> = integrity(<string>)

Defined for

<request-url-modifier>

This feature only appears in the context of these properties, functions or types.

Specification ↗

`interpolate()`

Function Not in any browser yet

Spec The interpolate() interpolation notation represents the interpolation of entire property values, which supports two alternative syntax patterns:

Syntax

interpolate( [ <progress-source> && [ by <easing-function> ]? && <easing-function>? ] , <input-position>{1,2} : <whole-value>, [ <easing-function>?, <input-position>{1,2} : <whole-value> ]#? ) | interpolate( <progress-source> && [ by <easing-function> ]? && <easing-function>? of <keyframes-name> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`log()`

Function Baseline: widely availablesince June 2026 Modern CSS: Exponential functions (CSS)

MDN The log() CSS function is an exponential function that returns the logarithm of a number.

Live preview Example from MDN

.bar {
  width: calc(log(var(--value), 10) * 2em);
}

.bar {
  height: 2em;
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25em 0;
}

<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>

Syntax

log( <calc-sum>, <calc-sum>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting log()
Chrome	120
Edge	120
Firefox	118
Safari	15.4
Chrome Android	120
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`max()`

Function Baseline: widely availablesince January 2023

Spec The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.

MDN The max() CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, angle, <time>, <percentage>, <number>, or <integer> is allowed.

Live preview Example from MDN

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

Syntax

max( <calc-sum># )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting max()
Chrome	79
Edge	79
Firefox	75
Safari	11.1
Chrome Android	79
Safari iOS	11.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`min()`

Function Baseline: widely availablesince January 2023

Spec The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.

MDN The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, angle, <time>, <percentage>, <number>, or <integer> is allowed.

Live preview Example from MDN

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="https://developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

Syntax

min( <calc-sum># )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting min()
Chrome	79
Edge	79
Firefox	75
Safari	11.1
Chrome Android	79
Safari iOS	11.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`mod()`

Function Baseline: newly availablesince May 2024 Modern CSS: round(), mod(), and rem()

MDN The mod() CSS function returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.

Syntax

mod( <calc-sum>, <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting mod()
Chrome	125
Edge	125
Firefox	118
Safari	15.4
Chrome Android	125
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`pow()`

Function Baseline: widely availablesince June 2026 Modern CSS: Exponential functions (CSS)

MDN The pow() CSS function is an exponential function that returns the value of a base raised to the power of a number.

Live preview Example from MDN

h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Syntax

pow( <calc-sum>, <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting pow()
Chrome	120
Edge	120
Firefox	118
Safari	15.4
Chrome Android	120
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`progress()`

Function Baseline: newly availablesince September 2026 Modern CSS: progress()

Spec The progress() functional notation represents the proportional distance of a given value (the progress value) from one value (the progress start value) to another value (the progress end value), each represented as a calculation. It is a math function, and can be input into other calculations such as a math function or a mix notation. The syntax of progress() is:

MDN The progress() CSS function returns a number value representing the position of one value (the progress value) relative to two other values (the progress start and end values).

Live preview Example from MDN

html {
  height: 100%;
  font-family: sans-serif;
}

body,
section {
  height: inherit;
}

section {
  --custom-min-width: 300px;
  --custom-max-width: 700px;
  --custom-width: 600px;

  min-width: var(--custom-min-width);
  max-width: var(--custom-max-width);
  width: var(--custom-width);

  background-color: cyan;
}

.progress {
  height: 4px;
  background-color: red;

  width: calc(
    progress(
        var(--custom-width),
        var(--custom-min-width),
        var(--custom-max-width)
      ) *
      100%
  );
}

<section>
  <div class="progress"></div>
</section>

Syntax

progress(no-clamp? <calc-sum>, <calc-sum>, <calc-sum>)

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting progress()
Chrome	138
Edge	138
Firefox	155
Safari	26
Chrome Android	138
Safari iOS	26

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`random-item()`

Function Experimental

Spec The random-item() function resolves to a random item from among its list of items.

Syntax

random-item( <random-key> , [ <declaration-value>? ]# )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting random-item()
Chrome	No
Edge	No
Firefox	No
Safari	Preview
Chrome Android	No
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗

`random()`

Function Limited availability Modern CSS: random()

Spec The random() function is a math function that represents a random value between a minimum and maximum value, drawn from a uniform distribution, optionally limiting the possible values to a step between those limits:

MDN The random() CSS function generates a random value within a specified range, optionally limiting the possible values to step size intervals between those limits. It can be used when specifying a <length>, <frequency>, angle, <time>, <resolution>, <percentage>, <number>, or <integer> within a property value.

Live preview Example from MDN

.box {
  rotate: random(property-scoped, 0deg, 360deg);
  width: random(property-scoped, 50px, 300px);
  background-color: hsl(random(property-scoped, 0, 360) 50% 50%);
  height: random(property-scoped, 50px, 300px);
}

@supports not (order: random(1, 2)) {
  body::before {
    content: "Your browser doesn't support the random() function.";
  }
}

<div class="box"></div>

Syntax

random( <random-key>? , <calc-sum>, <calc-sum>, <calc-sum>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting random()
Chrome	156
Edge	156
Firefox	Preview
Safari	26.2
Chrome Android	156
Safari iOS	26.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`referrer-policy()`

Function Not in any browser yet

Defined for

<request-url-modifier>

This feature only appears in the context of these properties, functions or types.

Specification ↗

`rem()`

Function Baseline: newly availablesince May 2024 Modern CSS: round(), mod(), and rem()

MDN The rem() CSS function returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.

Syntax

rem( <calc-sum>, <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting rem()
Chrome	125
Edge	125
Firefox	118
Safari	15.4
Chrome Android	125
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`round()`

Function Baseline: newly availablesince May 2024 Modern CSS: round(), mod(), and rem()

MDN The round() CSS function returns a rounded number based on a selected rounding strategy.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

div.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  --rounding-interval: 25px;
}

div.box-2 {
  height: round(up, 101px, var(--rounding-interval));
}
div.box-3 {
  height: round(down, 122px, var(--rounding-interval));
}
div.box-4 {
  height: round(to-zero, 120px, var(--rounding-interval));
}

div.box-5 {
  height: round(117px, 25px);
}

<div class="box box-1">height: 100px</div>
<div class="box box-2">up 101px (125px)</div>
<div class="box box-3">down 122px (100px)</div>
<div class="box box-4">to-zero 120px (100px)</div>
<div class="box box-5">nearest 117px (125px)</div>

Syntax

round( <rounding-strategy>?, <calc-sum>, <calc-sum>? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting round()
Chrome	125
Edge	125
Firefox	118
Safari	15.4
Chrome Android	125
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`sibling-count()`

Function Baseline: newly availablesince August 2026 Modern CSS: sibling-count() and sibling-index()

Spec The sibling-count() functional notation represents, as an <integer>, the total number of child elements in the parent of the element on which the notation is used.

MDN The sibling-count() CSS function returns an integer representing the total number of sibling DOM elements (direct children of the parent) of the element on which it is used, including itself.

Live preview Example from MDN

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
}

li {
  width: calc(100% / sibling-count());
}

li:nth-of-type(odd) {
  background-color: rgb(0 0 0 / 0.05);
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Syntax

sibling-count()

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting sibling-count()
Chrome	138
Edge	138
Firefox	154
Safari	26.2
Chrome Android	138
Safari iOS	26.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`sibling-index()`

Function Baseline: newly availablesince August 2026 Modern CSS: sibling-count() and sibling-index()

Spec The sibling-index() functional notation represents, as an <integer>, the index of the element on which the notation is used among its inclusive siblings. Like :nth-child(), sibling-index() is 1-indexed.

MDN The sibling-index() CSS function returns an integer representing the position of the current element in the DOM tree relative to all its sibling elements. The returned value is the index number of the contextual child's position among all the sibling elements within a parent element, with the first child returning 1 and the last child, returning the length of Element.children.

Live preview Example from MDN

#example-element {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#example-element > li {
  text-align: center;
  padding: 2px;
  border-radius: 8px;
  width: var(--width, calc(sibling-index() * 30px));
  color: white;
  background-color: hsl(
    calc(360deg / sibling-count() * sibling-index()) 50% 50%
  );
}

<ul id="example-element">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Syntax

sibling-index()

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting sibling-index()
Chrome	138
Edge	138
Firefox	154
Safari	26.2
Chrome Android	138
Safari iOS	26.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`sign()`

Function Baseline: newly availablesince June 2025 Modern CSS: abs() and sign()

MDN The sign() CSS function contains one calculation, and returns -1 if the numeric value of the argument is negative, +1 if the numeric value of the argument is positive, 0⁺ if the numeric value of the argument is 0⁺, and 0⁻ if the numeric value of the argument is 0⁻.

Syntax

sign( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting sign()
Chrome	138
Edge	138
Firefox	118
Safari	15.4
Chrome Android	138
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`sin()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The sin() CSS function is a trigonometric function that returns the sine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an angle by interpreting the result of the argument as radians. That is, sin(45deg), sin(0.125turn), and sin(3.14159 / 4) all represent the same value, approximately 0.707.

Live preview Example from MDN

:root {
  --radius: 140px;
  --dot-size: 10px;
}
.circle {
  display: grid;
  place-content: center;
  margin: 0 auto;
  width: calc(var(--radius) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-image:
    radial-gradient(black var(--dot-size), transparent var(--dot-size)),
    linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
  display: block;
  width: var(--dot-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-color: #ff6666;
  transform: translateX(calc(cos(0deg) * var(--radius)))
    translateY(calc(sin(0deg) * var(--radius) * -1));
}

<div class="circle">
  <span class="dot" id="example-element"></span>
</div>

Syntax

sin( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting sin()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`sqrt()`

Function Baseline: widely availablesince June 2026 Modern CSS: Exponential functions (CSS)

MDN The sqrt() CSS function is an exponential function that returns the square root of a number.

Live preview Example from MDN

:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /*  100px */
  --size-2: calc(var(--size-0) * sqrt(9)); /*  150px */
  --size-3: calc(var(--size-0) * sqrt(16)); /*  200px */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>

Syntax

sqrt( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting sqrt()
Chrome	120
Edge	120
Firefox	118
Safari	15.4
Chrome Android	120
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`src()`

Function Not in any browser yet

Spec The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource.

Syntax

src( <string> <url-modifier>* )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`tan()`

Function Baseline: widely availablesince September 2025 Modern CSS: Trigonometric functions (CSS)

MDN The tan() CSS function is a trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a <number> or an angle by interpreting the result of the argument as radians.

Live preview Example from MDN

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallelogram {
  --w: 400;
  --h: 200;
  --angle: 30deg;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}
.parallelogram::before {
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(calc(0deg - var(--angle)));
  background-color: red;
}

<div class="parallelogram"></div>

Syntax

tan( <calc-sum> )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting tan()
Chrome	111
Edge	111
Firefox	108
Safari	15.4
Chrome Android	111
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`transform-interpolate()`

Function Not in any browser yet

Spec The transform-interpolate() interpolation notation represents an interpolated <transform-list>, with the following syntax:

Syntax

transform-interpolate( [ <progress-source> && [ by <easing-function> ]? && <easing-function>? ], <input-position>{1,2} : <transform-list>, [ <easing-function>?, <input-position>{1,2} : <transform-list> ]#? )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`transform-mix()`

Function Not in any browser yet

Spec The transform-mix() mix notation represents a weighted average of <transform-list>, with the following syntactic form:

Syntax

transform-mix( [ <transform-list> && <percentage [0,100]> ]# )

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗

`url()`

Function Baseline: widely availablesince March 2019 Modern CSS: cross-origin() for url()Modern CSS: integrity() for url()Modern CSS: referrer-policy() for url()

Spec The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource.

MDN The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.

Live preview Example from MDN

ul {
  font-size: 3rem;
  margin: 0;
}

ul {
  list-style: outside
    url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Syntax

url( <string> <url-modifier>* ) | <url-token>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting url()
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<angle-percentage>`

Type Baseline: widely availablesince March 2018

MDN The <angle-percentage> CSS data type represents a value that can be either an angle or a percentage.

Syntax

[ <angle> | <percentage> ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <angle-percentage>
Chrome	2
Edge	12
Firefox	3.6
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<angle>`

Type Baseline: widely availablesince March 2018

Spec Angle values are <dimension>s denoted by <angle>. The angle unit identifiers are:

MDN The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in gradients and in some transform functions.

Live preview Example from MDN

#example-element {
  background-color: #0118f3;
  padding: 0.75em;
  width: 180px;
  height: 120px;
  color: white;
}

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This box can rotate to different angles.
  </div>
</section>

Browser support

First browser version supporting <angle>
Chrome	2
Edge	12
Firefox	3.6
Safari	4
Chrome Android	18
Safari iOS	3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<calc-keyword>`

Type Baseline: widely availablesince December 2025 Modern CSS: calc() keywords

MDN The <calc-keyword> CSS data type represents well-defined constants such as e and pi. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.

Live preview Example from MDN

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 200px;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: 10px;
}

span {
  font-family: monospace;
  font-size: 0.8em;
}

#e {
  background-color: blue;
}

#pi {
  background-color: blue;
}

<div id="wrapper">
  <div class="container">
    <div id="e"></div>
    <input type="range" min="0" max="7" step="0.01" value="0" id="e-slider" />
    <label for="e-slider">e:</label>
    <span id="e-value"></span>
  </div>
  <div class="container">
    <div id="pi"></div>
    <input type="range" min="0" max="1" step="0.01" value="0" id="pi-slider" />
    <label for="pi-slider">pi:</label>
    <span id="pi-value"></span>
  </div>
</div>

// sliders
const eInput = document.querySelector("#e-slider");
const piInput = document.querySelector("#pi-slider");
// spans for displaying values
const eValue = document.querySelector("#e-value");
const piValue = document.querySelector("#pi-value");

eInput.addEventListener("input", function () {
  e.style.transform = `rotate(calc(1deg * pow(${this.value}, e)))`;
  eValue.textContent = e.style.transform;
});

piInput.addEventListener("input", function () {
  pi.style.rotate = `calc(sin(${this.value} * pi) * 100deg)`;
  piValue.textContent = pi.style.rotate;
});

Syntax

e | pi | infinity | -infinity | NaN

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <calc-keyword>
Chrome	99
Edge	99
Firefox	108
Safari	15.4
Chrome Android	99
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<calc-sum>`

Type Not in any browser yet

MDN The <calc-sum> CSS data type represents an expression which performs a calculation in any CSS math function. The expression executes a basic arithmetic operation of addition and subtraction between two values.

Syntax

<calc-product> [ [ '+' | '-' ] <calc-product> ]*

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<custom-ident>`

Type Not in any browser yet

Spec Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property’s value definition. Such identifiers are fully case-sensitive (meaning they’re compared using the "identical to" operation), even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers).

MDN The <custom-ident> CSS data type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.

Specification ↗ MDN reference ↗

`<dashed-ident>`

Type Not in any browser yet

Spec The <dashed-ident> production is a <custom-ident>, with all the case-sensitivity that implies, with the additional restriction that it must start with two dashes (U+002D HYPHEN-MINUS).

MDN The <dashed-ident> CSS data type is a case-sensitive custom-ident starting with two dashes that denotes an arbitrary string used as an identifier.

Specification ↗ MDN reference ↗

`<dimension>`

Type Baseline: widely availablesince January 2018

Spec The general term dimension refers to a number with a unit attached to it; and is denoted by <dimension>.

MDN The <dimension> CSS data type represents a <number> with a unit attached to it, for example 10px.

Browser support

First browser version supporting <dimension>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<frequency-percentage>`

Type Not in any browser yet

MDN The <frequency-percentage> CSS data type represents a value that can be either a frequency or a percentage. Frequency values, e.g., the pitch of a speaking voice, are not currently used in any CSS properties.

Syntax

[ <frequency> | <percentage> ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<frequency>`

Type Not in any browser yet

Spec Frequency values are dimensions denoted by <frequency>. The frequency unit identifiers are:

MDN The <frequency> CSS data type represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties.

Specification ↗ MDN reference ↗

`<ident>`

Type Not in any browser yet

Spec CSS identifiers, generically denoted by <ident>, represent names, and are written as an unquoted sequence of (potentially escaped) characters corresponding to the <ident-token> grammar. [CSS-SYNTAX-3] Identifiers cannot be quoted; otherwise they would be interpreted as strings. CSS properties accept two classes of identifiers: pre-defined keywords and author-defined identifiers.

MDN The <ident> CSS data type denotes an arbitrary unquoted string of characters used as an identifier.

Specification ↗ MDN reference ↗

`<integer>`

Type Baseline: widely availablesince January 2018

Spec Integer values are denoted by <integer>.

MDN The <integer> CSS data type is a special type of number that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the column-count, counter-increment, grid-column, grid-row, and z-index properties and the range descriptor.

Syntax

<number-token>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <integer>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<length-percentage>`

Type Baseline: widely availablesince January 2018

MDN The <length-percentage> CSS data type represents a value that can be either a length or a percentage.

Live preview Example from MDN

p {
  /* length-percentage examples */
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /* length examples */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* percentage example */
  text-size-adjust: 20%;
}

<p>You can use percentages and lengths in so many places.</p>

Syntax

[ <length> | <percentage> ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <length-percentage>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<length>`

Type Baseline: widely availablesince January 2018 Modern CSS: rcap unit Modern CSS: rch unit Modern CSS: rex unit Modern CSS: ric unit Modern CSS: cap unit Modern CSS: lh unit Modern CSS: rlh unit Modern CSS: Container queries (size)

Spec Lengths refer to distance measurements and are denoted by <length> in the property definitions. A length is a dimension.

MDN The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.

Live preview Example from MDN

html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eeeeee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999999;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
}

.result {
  height: 20px;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

<div class="outer">
  <div class="input-container">
    <label for="length">Enter width:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>

const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  const code = document.createElement("code");
  code.textContent = `width: ${inputElem.value}`;
  result.appendChild(code);
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});

Browser support

First browser version supporting <length>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<number>`

Type Baseline: widely availablesince January 2018

Spec Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.

MDN The <number> CSS data type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation.

Browser support

First browser version supporting <number>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<percentage>`

Type Baseline: widely availablesince January 2018

Spec Percentage values are denoted by <percentage>, and indicates a value that is some fraction of another reference value.

MDN The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

Live preview Example from MDN

.container {
  background-color: navy;
}

.box1 {
  width: 50%;
  margin-left: 20%;
  background-color: chartreuse;
}

.box2 {
  width: 30%;
  margin-left: 60%;
  background-color: pink;
}

<div class="container">
  <div class="box1">Width: 50%, Left margin: 20%</div>
  <div class="box2">Width: 30%, Left margin: 60%</div>
</div>

Browser support

First browser version supporting <percentage>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<position>`

Type Baseline: widely availablesince March 2018

Spec The <position> value specifies the position of an alignment subject (e.g. a background image) inside an alignment container (e.g. its background positioning area) as a pair of offsets between the specified edges (defaulting to the left and top). Its syntax is:

MDN The <position> CSS data type denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the background-position, object-position, mask-position offset-position, offset-anchor and transform-origin properties.

Syntax

<position-one> | <position-two> | <position-four>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <position>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<ratio>`

Type Baseline: widely availablesince January 2018

Spec Ratio values are denoted by <ratio>, and represent the ratio of two numeric values. It most often represents an aspect ratio, relating a width (first) to a height (second).

MDN The <ratio> CSS data type describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the <ratio> is used as a value for the aspect-ratio media feature in @media media queries, the aspect-ratio size feature in @container container queries, and as a value for the CSS aspect-ratio property.

Syntax

<number [0,∞]> [ / <number [0,∞]> ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <ratio>
Chrome	3
Edge	12
Firefox	3.5
Safari	5
Chrome Android	18
Safari iOS	4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<resolution>`

Type Baseline: widely availablesince March 2025

Spec Resolution units are dimensions denoted by <resolution>. The resolution unit identifiers are:

MDN The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.

Browser support

First browser version supporting <resolution>
Chrome	29
Edge	12
Firefox	8
Safari	16
Chrome Android	29
Safari iOS	16

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<string>`

Type Baseline: widely availablesince January 2018

Spec Strings, denoted by <string>, are sequences of characters representing arbitrary textual data. When written literally, they are delimited by double quotes or single quotes, and correspond to the <string-token> production. [CSS-SYNTAX-3].

MDN The <string> CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, such as content, font-family, and quotes.

Browser support

First browser version supporting <string>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<time-percentage>`

Type Not in any browser yet

MDN The <time-percentage> CSS data type represents a value that can be either a time or a percentage.

Syntax

[ <time> | <percentage> ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Specification ↗ MDN reference ↗

`<time>`

Type Baseline: widely availablesince March 2018

Spec Time values are dimensions denoted by <time>. The time unit identifiers are:

MDN The <time> CSS data type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties.

Browser support

First browser version supporting <time>
Chrome	1
Edge	12
Firefox	4
Safari	3.1
Chrome Android	18
Safari iOS	2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`<url>`

Type Baseline: widely availablesince March 2019

MDN The <url> CSS data type is a pointer to a resource.

Syntax

<url()> | <src()>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting <url>
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Syntax

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Syntax

Browser support

Defined for

Syntax

Syntax

Browser support

Syntax

Syntax

Browser support

Syntax

Syntax

Browser support

Syntax

Defined for

Syntax

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Defined for

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Browser support

Syntax

Syntax

Browser support

Syntax

Syntax

Syntax

Browser support

Syntax

Browser support