Search code examples
reflectionwebkitcssopacity

How can I set opacity of the reflection when using -webkit-box-reflect?

I've been playing with the -webkit-box-reflect property in Chrome and can achieve a reflection that fades with the following code (it's example code from the Webkit blog):

-webkit-box-reflect:
  below 5px 
  -webkit-gradient(
  linear, left top, left bottom, 
  from(transparent), color-stop(0.5, transparent), to(white)
  );

Problem is, I want to set the opacity for the mask to a more subtle setting, but it seems to be choking on rgba(). Has anybody been able to successfully get different levels of opacity?

Any help is appreciated, thanks!

Solution 
  • -webkit-box-reflect:
  below 5px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
  color-stop(0.5, transparent), 
  to(rgba(255, 255, 255, 0.5)));

    Is this the code you were looking for? :)