Box & Text Shadow Settings for Funnels and Websites

Enhancing the visual appeal of your funnels and websites is now more accessible than ever with the introduction of box and text shadow settings. These features allow you to add depth and dimension to your elements, giving your designs a more engaging and professional look.

Add Box and Text Shadows

Versatile Shadow Options: Apply box shadows to various elements such as text, headings, paragraphs, images, and buttons. Text shadows can be added to text-based elements to create more depth.

Advanced Customization: Access shadow settings through the advanced tab to tailor shadows to your design needs.

User-Friendly Shadow Editor

Two Sections: Easily choose between box shadow and text shadow with dropdown menus.

Easy Default Settings: Click the plus button to apply a default outer shadow with preset values, which you can further customize.

Multiple Shadows: Add multiple shadows to any element for more complex designs.

Detailed Customization: Edit each shadow by selecting outer or inner shadow and adjusting the X value, Y value, Blur, Spread, and Color.

Enhanced Customization Parameters

Outer vs Inner Shadow: Outer shadows create a sense of elevation, making elements appear raised above the background. Inner shadows add a recessed effect, giving the illusion of depth within the element.

• X Value: Controls horizontal shadow offset.

• Y Value: Controls vertical shadow offset.

• Blur: Determines the sharpness or softness of the shadow.

• Spread: Expands or contracts the shadow size.

• Color: Choose the shadow color to match your design palette.

How to Use?

1. Access the Advanced Tab:

   • Open the funnel or website builder editor and navigate to the advanced tab.

1. Open the Shadow Dropdown:

   • Click on the shadow heading at the top to reveal the shadow editor dropdowns.

1. Select Shadow Type:

   • Choose between box shadow or text shadow by clicking the plus button next to each title. (Text shadow is only applicable to text-based elements.)

1. Apply Default Shadows:

   • A default outer shadow will be applied with preset values. Adjust as needed.

1. Add Multiple Shadows:

   • Click the plus button to add more shadows for a single element.

1. Edit Shadows:

   • Click on the title of each shadow to customize settings like outer/inner, X value, Y value, Blur, Spread, and Color.

2. Combine Shadows:

   • Experiment with different combinations for unique visual effects.

Pro Tips:

• Consistent Design: Use shadows sparingly to maintain a clean and professional look. Overuse of shadows can make your design look cluttered.

• Soft Shadows for Text: When applying text shadows, softer shadows often enhance readability without overwhelming the text.

• Experiment with Colors: Shadow colors don’t always have to be black or gray. Experiment with different hues that complement your design palette for a unique look.

• Layering Shadows: For advanced designs, layer multiple shadows on a single element to create complex visual effects.

Use Cases:

• Highlighting Buttons: Use outer shadows on buttons to make them stand out, encouraging user interaction.

• Elevating Images: Apply subtle box shadows to images to give them a floating effect, adding depth to your page.

• Text Emphasis: Utilize text shadows to highlight important headings or call-to-action texts, drawing more attention to them.

• Professional Aesthetics: Inner shadows can be used to give elements a more sophisticated and polished look, enhancing the overall aesthetics of your website.