CODEWITHSUNDEEP
htmlcss
Sunil Lohar
Sunil Lohar

Reputation: 2242

Box with fading opacity near edge

enter image description here

I need box whose opacity will be lower near the edge of the box (Ref. image, the red marked box having box whose opacity is getting low from right to left)

I used 

.waterMark
{
background-color: #FFFFFF;    
float: right;    
opacity: 0.6;
position: absolute;
width: 80%;
z-index: 999;
}

<div class="waterMark">

<p>SOME NAME</p>

</div>

i have used float :right but still it is aligned to left.

Upvotes: 4

Views: 4521

Answers (1)

user2354869
user2354869

Reputation:

You need to use CSS3 transparency and Gradient feature both at the same time.

some thing like below css:

.gradient{
        background-image: -webkit-gradient(
          linear, center center, left center, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

see this fiddle (it includes support for all the browsers. Am not sure of IE, cause I don't have it :))

Upvotes: 4

Related Questions