<alpha-value>

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

The value of an <alpha-value> is given as either a <number> or a <percentage>.

If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are clamped to like within the range 0 to 1.

If the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates 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

Setting text color opacity

Here an alpha value is used to set partially transparent text:

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

Setting shape image threshold

Here an alpha value is used to determine which parts of an image are considered part of a shape:

/* 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.