Box with fading opacity near the edge

Question

I need a box whose opacity will be lower at the edge of the field (image, a red marked box with a field whose opacity decreases 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 used float :right , but still it is left aligned.

Answer 1

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

something like 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 browsers. Not sure about IE because I don't have one :))