{"id":57548,"date":"2025-05-19T15:53:54","date_gmt":"2025-05-19T12:53:54","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=57548"},"modified":"2025-11-10T14:35:16","modified_gmt":"2025-11-10T12:35:16","slug":"style-tab-effects","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/style-tab-effects\/","title":{"rendered":"Style tab – Effects"},"content":{"rendered":"\n

[callout title=”Who can use this feature:”]This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Advanced tab<\/a>[\/callout]<\/p>\n\n\n\n

<\/p>\n\n\n\n

Adding a box shadow to your element can give it depth and allows the element to stand out on the page. For a more in depth look at shadows, see What is Shadow, Text Shadow and Boxed Shadow?<\/a><\/p>\n\n\n\n

Add a box shadow to an element<\/h2>\n\n\n\n

To add a border<\/strong>: <\/p>\n\n\n\n

    \n
  1. Open the Elementor Editor.<\/li>\n\n\n\n
  2. Add an element to the canvas.
    \"\"<\/li>\n\n\n\n
  3. Click the Style<\/strong> tab.
    \"\"<\/li>\n\n\n\n
  4. Open the Effects<\/strong> field.
    \"\" <\/li>\n\n\n\n
  5. To add a shadow, click the plus sign next to Box shadow<\/strong>.
    \"\"<\/li>\n\n\n\n
  6. You then have the following options:\n
      \n
    1. Color<\/strong>: Set a color for the shadow. For details, see Use the color picker<\/a>. <\/li>\n\n\n\n
    2. Position<\/strong>: There are two types of box shadow:\n
        \n
      1. Outset<\/strong>: the shadow starts at the element border and flows outward.<\/li>\n\n\n\n
      2. Inset<\/strong>: The shadow starts at the element border and flows inward.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
      3. Horizontal <\/strong>and Vertical<\/strong>: You can achieve interesting effects by changing the position of the shadow. Use the number fields to move the shadow right and left (Horizontal<\/strong>) or up and down (Vertical<\/strong>).<\/li>\n\n\n\n
      4. Blur<\/strong> and Spread<\/strong>: The shadow effect is caused by starting with a solid color and then increasingly blurring the color.\n
          \n
        1. Blur<\/strong>: Expands the area covered by the blurred color.<\/li>\n\n\n\n
        2. Spread<\/strong>: Expands the area covered by the solid color. <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n

          Add layers to your box shadow<\/h3>\n\n\n\n

          After creating a box shadow, you can add more depth or create unique effects by adding more layers to the shadow. <\/p>\n\n\n\n

          To add a layer to a box shadow<\/strong>:<\/p>\n\n\n\n

            \n
          1. Select an element with a box shadow and open the Effects<\/strong> field.
            \"\"<\/li>\n\n\n\n
          2. Click the plus sign by Box shadow<\/strong>.
            The box shadow options window appears.
            \"\"<\/li>\n\n\n\n
          3. Set the box shadow options and click outside the box to close the window. 
            You created a second layer of box shadow.<\/li>\n<\/ol>\n\n\n\n

            Add opacity to your element<\/h3>\n\n\n\n

            Opacity refers to the transparency level of an element, determining how much of the background is visible through it. Lowering the opacity makes the element more transparent.<\/p>\n\n\n\n

            To set opacity<\/strong>: <\/p>\n\n\n\n

              \n
            1. Add an element to the canvas.<\/li>\n\n\n\n
            2. Click the Style<\/strong> tab.
              \"\"<\/li>\n\n\n\n
            3. Open the Effects<\/strong> field.
              \"\"<\/li>\n\n\n\n
            4. Increase the Opacity<\/strong>.
              \"\"
              In this example, we\u2019ll set the opacity to 40%<\/strong>.<\/li>\n<\/ol>\n\n\n\n

              Filters<\/h3>\n\n\n\n
              \n