I am creating a heading for my site. The background of the heading is set as horizontal gradient with background becoming transparent as it goes from left to right. WHAT I AM TRYING TO DOCan I create box shadow for the heading such that the shadow too becomes transparent as it goes from left to right.WHAT I TRIED\[code\]width: 500px;height: 50px;position: absolute;color: #535353;left: 45%;top: 50%;margin-left: -150px;margin-top: -200px;background: -moz-linear-gradient(left, rgba(179,218,221,0.65) 0%, rgba(249,249,249,0) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(179,218,221,0.65)), color-stop(100%,rgba(249,249,249,0))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* IE10+ */background: linear-gradient(to right, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* W3C */filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#a6b3dadd', endColorstr='#00f9f9f9',GradientType=1 );border-radius: 5px; box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);-moz-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);-webkit-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);\[/code\]By using the following I can almost get it, but the transparent gradient dosenot look so good.Fiddlehttp://jsfiddle.net/p7W7M/
XImageTransform.Microsoft.gradient( startColorstr='#a6b3dadd', endColorstr='#00f9f9f9',GradientType=1 );border-radius: 5px; box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);-moz-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);-webkit-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);\[/code\]By using the following I can almost get it, but the transparent gradient dosenot look so good.Fiddlehttp://jsfiddle.net/p7W7M/