Understanding and Using Shadows in 10Web Builder

Shadows are a subtle but powerful design tool that can add depth, dimension, and visual interest to your creations. 10Web builder offers two main types of shadows:

• Box Shadow: Creates a box-like border with a shadow, making an element appear raised. This is the type of shadow typically found under Border or Box Shadow settings for containers, elements, and individual widgets.
• Text Shadow: Adds a shadow behind text to enhance readability or create a stylized look.

Where to find Shadow settings

10Web Builder offers flexible shadow controls that are integrated into the design workflow. Here's a general guide on where you'll usually find shadow settings for different element types:

• Containers, Sections & Columns: Look for shadow options within the Style tab, typically under the Border or Box Shadow sections.
• Images, Buttons, and Other Widgets: Many individual widgets have dedicated Box Shadow settings directly within the Style tab.
• Text Elements (Headings, Text Editors, etc.): Dedicated Text Shadow controls are usually found within the Style tab.

Customizing your Shadows

Once you've located the shadow settings, here's what you can adjust:

• Color: Choose the perfect shadow color to complement your design.
• Horizontal & Vertical: Control the direction of the shadow, simulating different light sources.
• Blur: Soften the edges of the shadow for a diffused look or keep it sharp for a crisp effect.
• Spread: Increase or decrease the overall size of the shadow.
• Position: Choose Outline for a shadow that falls outside the element, or Inset for a shadow that appears within its borders.