Add Shadow to elements.

You can add Shadow effects to elements in your web projects. You can save the Shadow style you created in the Custom Style section for later use. You can use the Shadow style you saved on different screens/elements by adding them from the Load Style section. You can edit, duplicate and delete the Shadow styles you have created at any time.


Custom Style means custom style. Style adjustments that change according to the elements are made from the Custom Style panel. Shadow style edits include color and Structure.


You can specify the color tone you want for your shadow by entering the hex code, RGB values ​​or selecting it from the color picker.



You specify the position of your shadow by entering + and - values.


You can set the amount of blur of your shadow.


The value you enter determines how much your shadow spreads to the background.

Adding Shadow to Elements

Follow these steps to add a shadow effect to elements using Shadow.

  1. Open the web application to which you want to add a shadow. You cannot add shadow to elements in mobile applications.

  2. Click on the element on the screen to select it.

  3. Open the Styling panel.

  4. Go to the Shadow option.

  5. Select the color you want from the Color section.

  6. From the Structure section, by entering X, Y, Blur, and Spread values, the Shadow you will create is used to visually elevate the elements or give an impression of a certain depth and size.

Last updated