CSS mask-image gradient on left side, and bottom

user_14255539 0
Viewed 160

What I want to do is fade only left side of the image, and the whole bottom. Currently I have:

mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 100%);

Which works perfectly for the left side of the image, but how can I apply the same to fade the bottom of the image (top to bottom)?

css-mask gradient css
1 Answers

Use multiple mask layers:

img {
  --f :40px; /* control the fading */

  -webkit-mask:
    radial-gradient(at 0 0,#000,#0000 70%) 100% 100%/var(--f) var(--f),
    linear-gradient( 90deg,#000,#0000) 100% 0/var(--f) calc(100% - var(--f)),
    linear-gradient(180deg,#000,#0000) 0 100%/calc(100% - var(--f)) var(--f),
    linear-gradient(#000 0 0) 0 0/calc(100% - var(--f)) calc(100% - var(--f));
  -webkit-mask-repeat: no-repeat;
}
<img src="https://picsum.photos/id/1069/200/200" >

user_86203330
Related