CSS <alpha-value> Data Type

Description

The CSS alpha-value data type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color. The alpha channel of a color is a value between 0 (fully transparent) and 1 (fully opaque). A value of 0.5, for example, indicates that the color is 50% transparent. The alpha-value data type is used in a number of CSS properties, such as:

  • opacity
  • background-color
  • color
  • filter
  • box-shadow
Here are some examples of how to use the alpha-value data type:
/* Set the opacity of an element to 50% */
opacity: 0.5;

/* Set the background color of an element to rgba(255, 0, 0, 0.5) */
background-color: rgba(255, 0, 0, 0.5);

/* Set the color of an element to rgba(0, 0, 0, 0.5) */
color: rgba(0, 0, 0, 0.5);

/* Add a drop shadow to an element with a 50% opacity */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
The alpha-value data type is a powerful tool for creating transparent and translucent effects in CSS. It can be used to create a variety of visual effects, such as:
  • Faded elements
  • Overlapping elements
  • Ghostly elements
  • Backgrounds that blend with the foreground
The alpha-value data type is a versatile and essential tool for any CSS developer.

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

<div class="element">&lt;alpha-value&gt; data type example</div>
.element {
  background-color: rgba(255, 0, 0, 0.5); /* Red color with 50% opacity */
  color: rgba(0, 128, 0, 0.7); /* Green color with 70% opacity */
  border: 2px solid rgba(0, 0, 255, 0.3); /* Blue border with 30% opacity */
  height: 100px;
  width: 300px;
  line-height: 100px;
}

Browser Support

The following table will show you the current browser support for the CSS alpha-value data type.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 2nd October 2023