Who This Is For / When to Use
This feature is for users who want to:
Improve visual hierarchy and depth
Highlight buttons, images, or content blocks
Add subtle or advanced design effects without code
Create more polished, professional layouts
What Box and Text Shadows Do
Shadow settings allow you to apply visual depth effects to elements:
Box Shadow: Adds shadows around containers, images, buttons, and sections
Text Shadow: Adds shadows behind text characters only
Both are configurable directly inside the builder.
Where to Find Shadow Settings
Shadow controls are available per element inside the builder’s Advanced tab.
Step 1: Open the Page Editor
Open your funnel or website
Click Edit on the page you want to customize
Step 2: Open the Advanced Tab
Select any element (text, image, button, column, or section)
In the right settings panel, click Advanced
How to Add a Box Shadow
Step 3: Open the Box Shadow Editor
Expand the Shadow section
Click the + icon next to Box Shadow
A default outer shadow is added automatically.
Step 4: Customize Box Shadow Settings
Each box shadow can be customized using:
Outer / Inner Shadow
X (horizontal offset)
Y (vertical offset)
Blur (softness)
Spread (size expansion)
Color
Multiple box shadows can be stacked on the same element.
How to Add a Text Shadow
Step 5: Apply and Customize Text Shadows
Select a text-based element (heading or paragraph)
Open Advanced > Shadow
Click + next to Text Shadow
Adjust X, Y, Blur, and Color values
Text shadows apply only to text, not containers.
Using Multiple Shadows
You can add more than one shadow to the same element:
Click the + icon again to add another shadow
Each shadow layer can have different values
Useful for layered or glow-style effects
Shadow Types Explained
Outer Shadow
Makes elements appear raised
Common for cards, buttons, and images
Inner Shadow
Creates a recessed or inset effect
Useful for subtle depth inside containers
Common Use Cases
Buttons: Add outer shadows to increase click visibility
Images: Create a floating or card-style appearance
Text: Highlight headings with subtle text shadows
Cards & Columns: Improve section separation and depth
Design Best Practices
Use shadows sparingly to avoid clutter
Prefer soft shadows for text readability
Match shadow colors to your brand palette
Stack shadows only when needed for emphasis
FAQ
How do I apply box or text shadows?
Select an element, open the Advanced tab, expand Shadow, and click the + icon next to Box Shadow or Text Shadow.
Can I add multiple shadows to one element?
Yes. You can stack multiple shadows on the same element by clicking the + icon multiple times.
What is the difference between outer and inner shadows?
Outer shadows create a raised effect, while inner shadows create a recessed effect inside the element.
Can I use text shadows on images or buttons?
No. Text shadows only apply to text-based elements. Use box shadows for images, buttons, and containers.
How do I control how soft or sharp a shadow looks?
Adjust the Blur value. Higher blur creates softer shadows; lower blur creates sharper edges.
Where are shadow settings located?
All shadow settings are found under the Advanced tab for each selected element.