Transparency in CSS

Previous Next

Home >> CSS >> CSS3 >> Transparency in CSS

Transparency Effect

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 Colors

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).

Code Explanation

All Tutorials related to CSS3

CSS3 Intro Vendor Prefixes Border Radius Property Box Shadow Property Transparency Text Shadow Pseudo Classes Pseudo Elements Word Wrap @Font-Face Linear Gradients Radial Gradient Background Size Background Clip Opacity Transitions Transform Rotate Translate Skew Scale and Multiple Animations Animation Properties 3D Transform CSS Filters 1 CSS Filters 2 CSS Filter 3

All Sections related to CSS

CSS Intro CSS Intro Quiz CSS Intro Exercise CSS Basic CSS Basic Quiz CSS Basic Exercise CSS Advance CSS Advance Quiz CSS Advance Exercise CSS3 CSS3 Quiz CSS3 Exercise CSS Properties CSS Functions CSS Selectors