Is it possible to fade a horizontal gradient into a vertical gradient to MASK something

Question

I have three background gradients, the horizontal mask, top border and bottom border which achieves this effect, fading borders into the background:

depth

Using this code (repeated with browser prefixes about a million times.. ugh):

background: 
    linear-gradient(to right,  rgba(200,100,40,1) 0%,rgba(250,235,115,0.5) 50%,rgba(200,100,40,1) 100%), 
    linear-gradient(to top,  rgba(240,175,30,1) 0%,rgba(240,175,30,0) 2px),
    linear-gradient(to bottom,  rgba(250,235,115,1) 0%,rgba(250,235,115,0) 2px) ; /* W3C */

It's almost there but my problem is the edges of the mask are full opacity (1) BUT the background isn't always a solid colour (some horizontal grds & inner shadow), resulting in these problems.

problem problem

My solution at the moment is to modify ALL my background code to ensure the background doesn't start fading until it's past the top mask and the bottom background colour is full before the bottom mask. This is cumbersome and inflexible, not what css3 is about.

I have seen some solutions to fading out borders ("Fade" borders in CSS) but they basically say it should work setting the border colour as a gradient but I'm yet to see it actually work and the threads are very dated.

Here it is without the "mask":

enter image description here

EDIT: SOLUTION: http://jsfiddle.net/turnosaurus/SWVJJ/

score 0 · Answer 1 · answered May 21 '13 at 02:48

Found a few things, got this solution:

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);

However, this removes a drop shadow effect I'm also applying to this element using pseudo :after and almost definitely won't perform well across browsers. Running out of time to fiddle with this though..

http://www.html5rocks.com/en/tutorials/masking/adobe/

http://thenittygritty.co/css-masking

https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

http://mir.aculo.us/2012/09/16/masking-html-elements-with-gradient-based-fadeouts/

http://jsfiddle.net/turnosaurus/SWVJJ/ Here's the working version I'm about to test, ended up adding a wrapper span for the mask (which I was trying to avoid) but it works! One thing to be careful of though is hiding content in the masked sections, this is illustrated by the elements in the list, which still maintain their hover cursor. — user1425011, May 21 '13 at 06:22

score 0 · Answer 2 · answered Apr 10 '17 at 10:23

Use an alpha channel.

So, Parent element has to be solid (NO ALPHA) Child elements must have alpha as the fade from and solid as the fade to.

So, for example, a footer with 10% blue, 80% red and 10% blue and you want to fade into white at the bottom due to having a separate footer background.

Then you want (note this is copied from my own code),

#content {background:#CCCCFF;
background: -webkit-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* Standard syntax (must be last) */
color:#000000;margin:0px}
#leftcol {}
#rightcol {}
#centrecol {background-color:#FF8080;padding-top:150px;width:80%;margin-left:10%;margin-right:10%;height:100%;}
#content2footer {background:#CCCCFF;
background: -webkit-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* For Firefox 3.6 to 15 */
background: linear-gradient(left,rgba(204,204,255,255) 8%, rgba(255,128,128,255) 10%, rgba(255,128,128,255) 90%, rgba(204,204,255,255) 92%); /* Standard syntax (must be last) */
color:#000000;margin:0px}
#content2footerleft {height:50px;width:10%;margin-top:0px;margin-left:0%;margin-right:90%;
background:#CCCCFF; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */
background:linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* Standard syntax */}
#content2footercentre {height:50px;width:80%;margin-top:-50px;margin-left:10%;margin-right:10%;
background:#FF8080; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */
background:linear-gradient(rgba(255,128,128,255), rgba(255,255,255,255)); /* Standard syntax */}
#content2footerright {height:50px;width:10%;margin-top:-50px;margin-left:90%;margin-right:0%;
background:#CCCCFF; /* For browsers that do not support gradients */
background:-webkit-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* For Firefox 3.6 to 15 */
background:linear-gradient(rgba(204,204,255,0), rgba(255,255,255,255)); /* Standard syntax */}
#footer {margin:5px;color:#808080;font-size:10px}

  <div id="content">
   <div id="leftcol">
   </div>
   <div id="rightcol">
   </div>
   <div id="centrecol">
   </div>
  </div>
  <div id="content2footer">
   <div id="content2footerleft">
   </div>
   <div id="content2footercentre">
   </div>
   <div id="content2footerright">
   </div>
  </div>
  <div id="footer">
    <p>this is the white footer</p>
    </div>

I hope this helps answer the question. I took research from this exact page and reinterpreted it, and originally made a mistake. Upon realising, I knew how to fix it and did so, I thought I'd answer the question in full.

Is it possible to fade a horizontal gradient into a vertical gradient to MASK something

2 Answers2