0

I'm encountering difficulty in applying a mask to only the top portion of an element rather than the entire element. I'm uncertain if I'm approaching this correctly.

I have an element called "footer" with a gradient. Behind this footer, there may be additional graphical elements.

My aim is to mask the top 100 pixels of this footer to create a smooth transition of the footer's gradient.

However, when I apply the mask, everything that isn't a colored object within the SVG is also masked away, including the area outside of the SVG.

The element

<footer class="footer">

</footer>

The styling

.footer {
    position: relative;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); 
    height: 200px;

    -webkit-mask-image: url('@/../public/SVG/AutomationLanscape.svg');
    mask-image: url('@/../public/SVG/AutomationLanscape.svg');
    -webkit-mask-size: 1000px auto; 
    mask-size: 1000px auto; 
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; 
    mask-position: top;
}
  • The gray is the background on the webpage and is not related to the footer.
  • The red is the size if the SVG
  • the blue is what i dont want masked.

This should create a landscape popping up from the footer element. enter image description here

Footer without the mask enter image description here

Improve this question
3
  • 1
    You can not apply a mask to only "part" of an element. You either need a bigger mask, that covers the whole footer; or you will have to implement the top portion using a separate element.
    – C3roe
    Commented Jun 10 at 10:23
  • Indeed, I've come to understand the situation. I've employed the ::before pseudo-element to successfully apply the mask, and it's performing as expected. However, it's worth noting that the fundamental issue of masking the footer element itself remains unresolved.
    – Mads Gadeberg
    Commented Jun 10 at 10:29
  • Not sure what you mean by that last part now.
    – C3roe
    Commented Jun 10 at 10:42

1 Answer 1

Reset to default
1

In this case the height of the SVG is not important, so if you just extend the SVG downwards, that is fine. Here is the SVG I use in the example:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
  <circle cx="100" cy="100" r="100"  />
  <circle cx="500" cy="50" r="50"  />
  <circle cx="900" cy="100" r="100"  />
  <rect y="100" width="1000" height="900" />
</svg>

It is 1000x1000 and the rectangle covers the part from y="100" to the bottom and therefore makes the bottom part of the footer transparent.

.footer {
    position: relative;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); 
    height: 200px; 
    mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIiAgLz4KICA8Y2lyY2xlIGN4PSI1MDAiIGN5PSI1MCIgcj0iNTAiICAvPgogIDxjaXJjbGUgY3g9IjkwMCIgY3k9IjEwMCIgcj0iMTAwIiAgLz4KICA8cmVjdCB5PSIxMDAiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjkwMCIgLz4KPC9zdmc+Cgo=');
    mask-size: 1000px auto; 
    mask-repeat: no-repeat; 
    mask-position: top left;
}
<footer class="footer"></footer>

Improve this answer
1
  • Yes, this is what I ended up doing as well—creating an SVG that covered the entire gradient I wanted to display. My monitor is 7680px wide, so I had to make the SVG this wide to ensure no white edges would show in fullscreen mode. This might be overkill, but it highlights the limitations of not being able to use the preferred method mentioned in the question.
    – Mads Gadeberg
    Commented Jun 12 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.