Style Settings - Box Shadow

The use of a shadow gives an element a subtle yet poignant look. So in this article, let us see how CodeDesign aids you with a shadow.

Updated over a week ago

You can find the shadow option beneath the style settings which lies on the right sidebar of your canvas. To style an element with the shadow, CodeDesign provides you with four different options. Such as Nil, Light, Dark, and Custom. You can choose the one according to your needs. Let’s see how it works.

Nil – This option is to not have a shadow! So don’t worry.

Light – After selecting the element, when we click on this icon your element will get a light shade of shadow with a lesser depth.

Dark – As the name itself says, the shadow will be much darker yet subtle when we choose this icon.

Custom – Under the custom button, you can personalize the colour, size, and side on which you need a shadow.

How to Customize Shadow

  1. Click on the element on which you need a shadow.

  2. Go to the custom button that lies on the right sidebar of the canvas.

  3. Enter your values for the x and y-axis of your shadow.

  4. Choose the needed color from the box.

  5. Done! You can also find the blur and spread button nearby.

  • If you want the shadow in a vague manner or dark as similar to that of the element, you can enter a certain value near the blur option.

  • if you want to spread the shadow all around the element, you can enter a constant value to the spread option.

Step by Step Explanation of Style Settings

Did this answer your question?