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.


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 lie 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.

Formal syntax

<alpha-value> = 
<number> |


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.


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 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;


CSS Color Module Level 4
# type-def-alpha-value

See also