CSS <number> Data Type

The CSS <number> data type represents a real number. Number values can be positive, negative, or zero and can contain a fractional component. Unlike a <dimension>, a number does not include a unit.

Syntax

A <number> can be an integer or contain a fractional component. It can also include an optional plus (+) or minus (-) sign.

0
1
-1
1.5
-0.75
+2.25

Numbers do not include a CSS unit. A value such as 10px is a <dimension>, not a <number>.

Whole and Fractional Values

The <number> data type can represent both whole numbers and numbers with fractional components.

Value	Description
`5`	Whole number
`2.5`	Positive fractional number
`0.25`	Fractional number between 0 and 1
`-1.5`	Negative fractional number

Positive and Negative Values

The <number> data type itself allows positive numbers, negative numbers, and zero. Individual CSS properties and functions can restrict the range of numbers they accept.

For example, opacity uses a number whose effective value is limited to the range from 0 to 1, while other CSS features can accept values outside that range.

Scientific Notation

CSS numbers can use scientific notation, also called exponential notation. The letter e or E is followed by an optional sign and an integer exponent.

1e3
1E3
2.5e2
1e-2
-3.5e+2

For example, 1e3 represents 1000, while 1e-2 represents 0.01.

Numbers and Integers

Every <integer> can also be represented as a <number>, but a <number> is not required to be an integer. The main difference is that <number> allows a fractional component.

Value	`<number>`	`<integer>`
`5`	Valid	Valid
`-3`	Valid	Valid
`2.5`	Valid	Not valid
`-0.75`	Valid	Not valid

<number> Example

The opacity property provides a simple example of a CSS property that accepts a number:

.opaque {
  opacity: 1;
}
.partial {
  opacity: 0.5;
}
.faint {
  opacity: 0.2;
}

Browser Result

0.5

0.2

As the number decreases from 1 toward 0, the element becomes increasingly transparent.

The <number> data type is used by many CSS properties, including:

Specifications

The <number> data type is defined in the CSS Values and Units Module Level 4 .

CSS <number> Data Type