alpha-value

Draft
This page is not complete.

The <alpha-value> CSS data type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color.

Syntax

If given as a number, the useful range is '0' (fully transparent) to '1' (fully opaque), with decimal values in between. Values outside the range of 0 to 1 are valid, but are clamped to 0 or 1.

If given as a percentage, '0%' corresponds to fully transparent, and '100%' to fully opaque.

Interpolation

When animated, values of the <alpha-value> CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the timing function associated with the animation.

Examples

Some CSS features that use <alpha-value> values include color functions like rgba() and hsla(), and shape-image-threshold, which determines which pixels are considered part of an image for the purpose of extracting a shape.

/* <rgba()> */
color: rgba(34, 12, 64, 0.6);
color: rgba(34.0 12 64 / 60%);

/* shape-image-threshold */
shape-image-threshold: 70%;
shape-image-threshold: 0.7;

Specifications

Specification Status Comment
CSS Color Module Level 4
The definition of '<alpha-value>' in that specification.
Working Draft No significant change.
CSS Color Module Level 3
The definition of '<alpha-value>' in that specification.
Recommendation Introduces <alpha-value> along with rgba() and hsla() functional notations.