How to Manage Shadows on a Webpage

In modern web design, shadows are powerful visual tools used to create depth, highlight key elements, and enhance the overall user experience. When applied correctly, shadows give the impression that elements such as cards, buttons, or sections are floating above the background—making your page feel more interactive and engaging.

✅ Steps to Add or Customize Page Shadows in Kea Builder

• 🟢 Step 1: Access Page Settings
  Go to the top menu bar and click on the Page Settings option. This opens a panel with multiple customization settings for your webpage.


• 🌗 Step 2: Navigate to the ‘Shadow’ Section
  From the horizontal slider menu within the settings panel, select the Shadow option.


• 🧭 Step 3: Choose Shadow Type
  You’ll be presented with the option to apply either:
  Outer Shadow – casts a shadow outside the element’s border
  Inner Shadow – applies the shadow within the boundaries of the element
  Choose the one that suits your design needs.


• 🎨 Step 4: Set the Shadow Color
  Click on the color picker to choose the desired color for your shadow. Dark or light tones can create dramatic or subtle effects depending on the background.


• 🛠️ Step 5: Adjust Shadow Properties
  Fine-tune the appearance of your shadow using the following controls:
  - Horizontal Position – moves the shadow left or right
  - Vertical Position – moves the shadow up or down
  - Blur Strength – softens the shadow’s edges for a more natural look
  - Spread Strength – increases or decreases the size of the shadow area

Each setting allows you to create a tailored visual effect that enhances the element or section.

🔁 Apply Across Pages

This same process can be repeated for each webpage on your site, allowing you to maintain design consistency and visual depth across your project.

💡 Design Best Practices:

• Use shadows to emphasize clickable elements like buttons or CTAs.
• Combine soft blur with low opacity for minimal, elegant effects.
• Test shadows on different background colors for optimal contrast.

With Kea Builder, managing shadows is simple and flexible—enabling you to bring dimension and refinement to every corner of your site.