CSS <alpha-value> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <alpha-value> CSS data type represents the opacity level of a color or visual element, defining how transparent or opaque it appears when rendered. Rather than describing a color’s hue, saturation, or brightness, this type strictly controls how much of the underlying content shows through. An alpha value of full opacity makes the element completely solid, while a lower value increases transparency, allowing background colors, images, or text to blend visually with the foreground. This makes the type essential for layered designs, subtle overlays, shadows, and modern UI effects where depth and emphasis are communicated through translucency.

The <alpha-value> is commonly used as a component of color definitions and is interpreted as a fractional intensity applied during compositing. Internally, browsers use this value to calculate how pixels from the foreground and background are mixed together. Although the value is conceptually simple, its visual impact can be significant: even small changes can dramatically affect contrast, readability, and perceived hierarchy. Because of this, alpha values are frequently paired with color spaces that support transparency, such as <percentage>-based or numeric channels, ensuring designers can fine-tune translucency with precision.

In practice, the <alpha-value> often appears in functions and properties that influence visual blending. For example, colors that include transparency are often combined with layout and visual properties like opacity, box shadows, gradients, or backgrounds to create overlays and hover effects. While the alpha value itself applies to a color component, it differs from applying opacity to an entire element, which affects all of the element’s contents, including text and child elements. Understanding this distinction helps avoid unintended transparency side effects in complex layouts.

Code examples

Using an alpha value in an RGBA color

.card {
  background-color: rgba(0, 0, 0, 0.5);
}

In this example, the background is black with a semi-transparent overlay, allowing whatever sits behind the card to partially show through.

Using an alpha value in HSL-based color

.alert {
  background-color: hsla(200, 100%, 50%, 0.25);
}

Here, the alpha value softens the bright blue tone, making it suitable for subtle informational highlights.

Comparing color alpha vs. element opacity

.overlay {
  background-color: rgb(255 0 0 / 0.4);
}

.faded {
  opacity: 0.4;
}

The first rule applies transparency only to the background color via an alpha value, while the second fades the entire element and its contents. This illustrates how <alpha-value> provides more targeted control over transparency than element-level opacity.

Syntax

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

Values

<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.
<percentage>0% corresponds to fully transparent while 100% indicates fully opaque.

Example

HTML

<body>

  <main class="examples">

    <h1>&lt;alpha-value&gt; examples</h1>



    <div class="row">

      <div class="card rgba">

        <div class="swatch">rgba(255, 0, 0, 0.5)</div>

      </div>



      <div class="card rgb-slash">

        <div class="swatch">rgb(0 128 0 / 50%)</div>

      </div>



      <div class="card hsl">

        <div class="swatch">hsl(200 80% 50% / 0.25)</div>

      </div>



      <div class="card hex">

        <div class="swatch">#FF000080</div>

      </div>

    </div>



    <p class="note">Alpha values can be numbers (0 to 1) or percentages (0% to 100%).</p>

  </main>

</body>

CSS

/* Layout and typography */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f7f7fb;
  color: #111827;
  padding: 32px;
}

.examples {
  max-width: 980px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin: 0 0 18px 0;
}

.row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 200px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  background: #ffffff;
}

.swatch {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
}

/* Examples demonstrating different  syntaxes */
.rgba .swatch {
  background: rgba(255, 0, 0, 0.5); /* numeric alpha: 0.5 */
}

.rgb-slash .swatch {
  background: rgb(0 128 0 / 50%);    /* percentage alpha: 50% */
}

.hsl .swatch {
  background: hsl(200 80% 50% / 0.25); /* numeric alpha: 0.25 */
}

.hex .swatch {
  background: #ff000080; /* 8-digit hex with alpha (0x80 = 50%) */
}

.note {
  margin-top: 14px;
  color: #475569;
  font-size: 13px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS alpha-value data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.