Complete CSS Data Type List

CSS Data Type Reference

CSS data types define the kinds of values that CSS properties and functions can accept. In CSS syntax, data types are generally represented by names enclosed in angle brackets, such as <length>, <color>, and <percentage>.

This reference organizes commonly encountered CSS data types by purpose. Use the search box to find a data type by name or description, or switch to the alphabetical view when you already know the data type you are looking for.

Search CSS Data Types

Enter a data type name or a word describing what the data type represents. The list will automatically display matching data types.

Numeric

Numeric data types represent numbers, integers, percentages, ratios, and other numerical values used throughout CSS.

<integer>Represents a whole number without a fractional component.

<number>Represents a real number that may include a fractional component.

<percentage>Represents a value expressed as a percentage of another value.

<ratio>Represents the proportional relationship between two numeric values.

Sizes & Dimensions

Dimension data types represent lengths, angles, times, frequencies, resolutions, and combinations of dimensions and percentages.

<absolute-size>Represents an absolute font-size keyword.

<angle>Represents an angle expressed using an angle unit.

<angle-percentage>Represents either an angle or a percentage that resolves to an angle.

<dimension>Represents a number combined with a unit.

<flex>Represents a flexible length used for Grid track sizing.

<frequency>Represents a frequency value.

<frequency-percentage>Represents either a frequency or a percentage that resolves to a frequency.

<length>Represents a distance using a CSS length unit.

<length-percentage>Represents either a length or a percentage that resolves to a length.

<relative-size>Represents a font size relative to the inherited font size.

<resolution>Represents pixel density or another resolution measurement.

<time>Represents a duration expressed in seconds or milliseconds.

<time-percentage>Represents either a time or a percentage that resolves to a time.

Text & Identifiers

Textual data types represent strings, identifiers, URLs, and author-defined names used by CSS.

<custom-ident>Represents a case-sensitive author-defined identifier.

<dashed-function>Represents a custom function name beginning with two hyphens.

<dashed-ident>Represents an author-defined identifier beginning with two hyphens.

<generic-family>Represents a generic font-family keyword.

<string>Represents a sequence of characters enclosed in quotation marks.

<url>Represents a URL identifying an external or local resource.

Color

Color data types represent colors, transparency, hues, and color interpolation information.

<alpha-value>Represents the transparency or opacity component of a color.

<color>Represents a CSS color value.

<color-interpolation-method>Specifies the color space and hue interpolation method used when colors are interpolated.

<hue>Represents a hue angle or number used by CSS color functions.

Images & Shapes

Image and shape data types represent CSS-generated images, gradients, geometric shapes, and related values.

<basic-shape>Represents a geometric shape created with a CSS shape function.

<color-stop-list>Represents a sequence of color stops and optional color hints used by gradients.

<corner-shape-value>Represents the shape applied to a container corner.

<gradient>Represents a CSS gradient image.

<image>Represents a CSS image value, including image resources and generated images.

<shape>Represents the legacy rectangular shape used by the deprecated clip property.

Layout & Positioning

Layout and positioning data types describe positions, edges, axes, line styles, and related layout values.

<axis>Represents an axis used by supported CSS layout features.

<box-edge>Represents an edge or box associated with the CSS box model.

<line-style>Represents a line or border style.

<line-width>Represents a line or border width.

<position>Represents a two-dimensional position within a positioning area.

Display & Alignment

Display and alignment data types represent display behavior and alignment values used by modern CSS layout systems.

<baseline-position>Represents baseline alignment values.

<content-distribution>Represents values that distribute alignment subjects within a container.

<content-position>Represents positional alignment values.

<display-box>Represents values controlling whether an element generates display boxes.

<display-inside>Represents an element's inner display type.

<display-internal>Represents internal display roles used by layout models such as tables and ruby.

<display-legacy>Represents legacy single-keyword display values.

<display-listitem>Represents display values that generate a list-item box.

<display-outside>Represents an element's outer display type.

<overflow-position>Controls alignment behavior when the alignment subject overflows its container.

Animation & Effects

Animation and effect data types represent easing, blending, filters, and transform operations.

<blend-mode>Represents a blending operation used to combine colors.

<easing-function>Represents a function controlling the rate of change during a transition or animation.

<filter-function>Represents a graphical filter operation.

<transform-function>Represents an individual CSS transform operation.

Calculation

Calculation data types represent values and expressions used by CSS mathematical functions.

<calc-keyword>Represents a predefined keyword that can be used in CSS calculations.

<calc-sum>Represents the top-level sum grammar used by CSS mathematical expressions.