How to set reflection transparency when using -webkit-box-reflect?

I play with the -webkit-box-reflect property in Chrome and can achieve a reflection that disappears with the following code (this is sample code from Webkit Blog ):

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

The problem is that I want to set the opacity of the mask for finer tuning, but it seems to choke on rgba (). Has anyone been able to successfully obtain different levels of opacity?

Any help is appreciated, thanks!

+3
source share
1 answer
-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? :)

+9
source

Source: https://habr.com/ru/post/1736992/


All Articles