Can you create opacity gradients in Squarespace?

I'm interested in replicating the opacity gradient effect applied to the phone in the attached image on my website. As you can see, the top half of the phone is completely opaque, with a rapid fade to transparent at the halfway point. The website in question is https://www.opal.so/

Is this possible to apply in Squarespace directly? If not, I would be grateful to learn how would I replicate it using external tools.

Do you have a link to example site in your screenshot? We can check easier

7 hours ago, tuanphan said:

Do you have a link to example site in your screenshot? We can check easier

https://www.opal.so/

On 7/19/2024 at 5:00 PM, JessicaM said:

@Sebastian-D You can always do it in a graphics program, like Photoshop or Figma. They've used code to do it on their site. This is the code they've used (replace 'yourimageblock' with your own) -

YOURIMAGEBLOCK {
-webkit-mask: radial-gradient(78.47% 67.69% at 50.07% 32.31%,#000 0%,#000 49.96%,rgba(0,0,0,.7) 69.77%,rgba(0,0,0,.12) 85.07%,transparent 100%);
}

Thanks so much!

You bet!