Transparency in CSS
Before CSS3, transparent images were used for the transparency effect. Now, we can create our own transparency effect without the need for transparent images. As we know CSS uses Color Names, Hex Values, and RGB for coloring the content.
RGBA color values are an extension of RGB color values with an alpha channel, which specifies the opacity of a color. An RGBA color value is specified with rgba(red, green, blue, alpha). An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
HSL (Hue, Saturation, Lightness) Colors
An HSL color value is specified with hsl(hue, saturation, lightness). Hue is a degree on the color wheel ranging from 0 to 360. 0 (or 360) is red, 120 is green, and 240 is blue. Saturation is a percentage value: 100% is the full color. Lightness is also a percentage; 0% is dark (black) and 100% is white. HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color (just like RGBA).