Alpha and Opacity in CSS

In CSS, alpha and opacity are used to control the transparency of elements, but they are applied in slightly different ways. Both are related to making elements more or less transparent by adjusting their opacity levels.

• 1. Alpha Transparency (RGBA, HSLA)

  • Alpha represents the opacity level of a color and is used in certain color functions such as RGBA and HSLA.

  • It’s the fourth value in the rgba() and hsla() color models and ranges from 0 (completely transparent) to 1 (completely opaque).

    • 0: Fully transparent (invisible)

    • 1: Fully opaque (no transparency)

  • RGBA stands for Red Green Blue Alpha, while HSLA stands for Hue Saturation Lightness Alpha

    div {
        height: 150px;
        width: 300px;
        background-color: rgba(255, 0, 0, 0.5);
         /* 50% transparent red */
        border: 5px dotted black;
        margin:5px;
      }

2. opacity Property

• opacity is a CSS property that controls the transparency of an entire element, including all of its child elements.

• The opacity value ranges from 0 (completely transparent) to 1 (completely opaque).

  • 0: Fully transparent (element is invisible)

  • 1: Fully opaque (element is fully visible)

• If an element has child elements, setting opacity on the parent affects the entire element and its children.

Before applying opacity

•   div {
      height: 150px;
      width: 300px;
      background-color:red;
      border: 5px dotted black;
      margin:5px;
      opacity: 0.5; /* 50% transparency */
    }
  

  

  Key Differences Between Alpha and Opacity

  | Property | Applied To | Affects Child Elements? | Range | Common Usage | | --- | --- | --- | --- | --- | | Alpha | Individual colors (background, text) | No | 0 to 1 | Transparency in specific colors (RGBA, HSLA) | | opacity | Entire element (including children) | Yes | 0 to 1 | Making entire elements transparent |