CSS <alpha-value> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<div class="element">&lt;alpha-value&gt; data type example</div>

CSS

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

Result

Editor