Codestin Search App

CSS <number> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <number> CSS data type represents numeric values in CSS that are not associated with any specific units. Unlike the <length> type, which requires units such as px or em, a <number> is a plain number, which can be an integer or a decimal. It is commonly used in contexts where numeric scaling, weighting, or counts are required, rather than physical measurements.

A key feature of the <number> type is that it can accept both positive and negative values depending on the property it is applied to. For example, the opacity property accepts a <number> value between 0 and 1, while the flex-grow property uses non-negative numbers to determine how much a flex item should grow relative to the rest.

Another common use of <number> is in z-index, where integers determine stacking order without any units. The simplicity of <number> makes it ideal for calculations and animations, such as with animation-delay or transition-duration, where numeric factors are multiplied by other values.

Examples:

/* Flex item growth using numbers */
.item {
  flex-grow: 2; /* plain number */
}

/* Opacity using a decimal number */
.overlay {
  opacity: 0.75; /* number between 0 and 1 */
}

/* Z-index using integer numbers */
.modal {
  z-index: 10; /* higher numbers appear on top */
}

In summary, <number> is a versatile data type in CSS for purely numeric values, often used in proportional, scalar, or count-based properties where units are unnecessary. It contrasts with types like <length> or <percentage>, which attach meaning through units or context.

Syntax

property: <number>;

Values

<number>A number can consist of the following: Digits 0 to 9, decimal point ( . ), addition ( + ), minus ( - ) or an exponent composed of "e" or "E" and an integer.

Example

HTML

<div class='example' role='group' aria-label='Progress example'>

  <div class='meter' aria-hidden='true'>

    <div class='fill'></div>

  </div>

  <p class='label'>Progress animation using CSS &lt;number&gt; custom property</p>

</div>

CSS

/* Register a numeric custom property so it can be animated */
@property --progress {
  syntax: '';
  inherits: false;
  initial-value: 0;
}

/* Container */
.example {
  --progress: 0;
  width: 360px;
  margin: 28px auto;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  animation: increase 4s ease-in-out forwards;
}

/* Visual meter */
.meter {
  width: 100%;
  height: 18px;
  background: #e9e9e9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.fill {
  /* Use the numeric custom property directly in a calc; it represents a plain number */
  width: calc(var(--progress) * 1%);
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  transition: width 300ms linear;
}

.label {
  margin-top: 10px;
  font-size: 13px;
  color: #333;
  text-align: center;
}

/* Animate the numeric custom property (possible because of @property syntax '') */
@keyframes increase {
  0%   { --progress: 8; }
  50%  { --progress: 64; }
  100% { --progress: 100; }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS number data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.