Shadows provide depth to a webpage, and can be used to draw attention to a specific part of your website.
On STUDIO, shadows can be set from the top bar.
Using Preset Shadows
There are four preset shadows that you can quickly apply to elements.
You can find the on the top of the shadow dropdown.
Create Custom Shadows
To create custom shadows, you can drag the square on the shadows graph as below. This will change the position as well as the blur value of the shadow.
You can manipulate the shadow position without changing the blur value by clicking on the lock on the shadow graph.
To then manipulate blur independently, you can drag the outer line that appears.
Alternatively, you can enter a precise value underneath the graph.
- X & Y axis: the value represents the starting point of the shadow on the horizontal & vertical axis.
- Blur: the higher the value, the more blurry the shadow.
- Spread: how much further away the shadow spreads.
- Color: the color of the shadow
Inset shadows are cast inside instead of outside a box.
To create inset shadows, check the option ‘inset’ on the shadows dropdown.
To eliminate a shadow that has been set on an element, click on the dash symbol on the shadow drop down.
If shadows don’t properly show
It is possible that shadows don’t fully show or don’t show at all.
The cause may be that the parent box needs to be big enough to accommodate the shadows, as the shadows don’t ‘overflow’ an element’s container box.
Try to fix the size of the parent box or add margin or padding if shadows don’t show properly.