Search within TutorialsPark

CSS Opacity

Use CSS opacity property to create opaque boxes and text

CSS Opacity

1. You can make elements or their contents transparent by setting their opacity property , its value can range in between zero(completely transparent) to 1(completely opaque)

  color: rgba(255, 255, 0, 0.75); 

  background: rgba(0, 0, 0, 0.75);

Angry Birds

Setting the Opacity of an Element

Syntax: Opacity

Opacity: number(between 0 and 1);

Demo: CSS Opacity


1.In the below demo, we have three elements with different opacity values . The opacity values are applicable(or inherited) to child elements as well

CSS Example : opacity property

Give it a TRY! » Note: In theory, Opacity is a measure of what percentage of light is blocked by an element.

Opacity with over effects

Demo: Hover on Images to see the effects

1.One of the best practical application of opacity property is to combine them with :hover, to create a dynamic effects as user moves the mouse pointer over the element.

Example: CSS opacity with hover effects

Give it a TRY! »