Wix studio design 3 questions (no code)

Ask the community
, , ,
1

As a beginner, I’m facing a few challenges and would greatly appreciate positive and practical advice. I’ve tried to fix these issues myself but now need expert guidance. Here are my three questions:

Question 1: Light Effect on Hover (No Code)
On the presented image, there is a container where, when hovering the mouse over different parts, a light effect follows the mouse without spilling outside the container. How can I achieve this same effect in Wix Studio without using any code?

Untitled-2
Untitled-22400×1002 114 KB

Question 2: Gradient Border with Curved Corners
Inside the same container, there’s a button with a gradient border and curved corners. When I try to recreate this button, I can either get curved corners with a solid color or square corners with gradient colors. But I cannot make a gradient border with curved corners. How do I achieve this?

Question 3: Creating a Soft, Diffused Light Effect
I’ve seen on some websites where the page scrolls with a dark black background, and a diffused color light lightly moves in the background. The light is very soft, with no sharp edges, and spreads quite large. I understand the technique but struggle to create this smooth, gradient light in Photoshop without it becoming a large file, which could slow down the site. Or it is video? How can I create this effect efficiently?
examples:

I would be grateful for any guidance, preferably broken down into steps.

2

Although the best way is to use some codes, here are the workarounds

1 - Use a light effect SVG files(your can find many of them in either Wix Library or outside), set its color to white(like a light) and add it either as a custom cursor or use the Follow Mouse animation in animation and effects.

2 - Create an Image in Photoshop (use the circle tool) the same size as your button with just the corner of the image as the gradient(rest as transparent), then set the image as the button background. You can set the corner as well. You can also use an SVG file and edit it to add the gradient border and use it as the background of the button.

3 - You can add a blurred white image(can add blur using CSS or use a light effect image like in step 1), pin it to page and add parallax effect.