W3cubDocs

/CSS

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

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 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
CSS Color Module Level 4 # type-def-alpha-value