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)?
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" >