CSS <alpha-value> Data Type

The CSS <alpha-value> data type represents the transparency or opacity of a color or other CSS value. It can be expressed as a number or percentage, where lower values are more transparent and higher values are more opaque.

Syntax

The <alpha-value> data type accepts either a <number> or a <percentage>:

<alpha-value> = <number> | <percentage>

Values

Value	Description
`0`	Fully transparent.
`0.5`	50% opaque and equivalent to `50%`.
`1`	Fully opaque.
`0%`	Fully transparent and equivalent to `0`.
`50%`	50% opaque and equivalent to `0.5`.
`100%`	Fully opaque and equivalent to `1`.

How <alpha-value> Works

When an <alpha-value> is written as a number, the useful range is 0 to 1. When written as a percentage, the corresponding range is 0% to 100%. Values between the minimum and maximum produce partial transparency.

Values outside these ranges are permitted, but they are clamped to the nearest limit. For example, a value below 0 is treated as 0, while a value above 1 is treated as 1.

<alpha-value> Example

The following example uses different alpha values with the rgb() color function to change the transparency of the same blue color:

.opaque { background-color: rgb(0 136 204 / 100%); }
.semitransparent { background-color: rgb(0 136 204 / 50%); }
.transparent { background-color: rgb(0 136 204 / 0%); }

Browser Result

100% - fully opaque

50% - partially transparent

0% - fully transparent

The <alpha-value> data type is used by CSS features that accept transparency or opacity values, including:

Specifications

The <alpha-value> data type is defined in the CSS Color Module Level 4 .

CSS <alpha-value> Data Type