For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Sign in
DocsChangelog
DocsChangelog
  • Getting started
    • Introduction
  • The Visual Builder
    • Builder basics
    • Pages
    • Layouts
    • Elements
    • Components
    • Theming
    • Files
    • Responsive design
      • Width
      • Margin
      • Padding
      • Alignment
      • Backgrounds
      • Corners
      • Borders
      • Animations
      • Gap
      • Shadows
      • Height
      • Visibility
  • Guides
    • Previewing and sharing
    • Publishing
    • SEO
  • Settings
    • Developer docs
    • Blog
    • Support
Sign in
LogoLogo
On this page
  • Examples
  • Pro tips
The Visual BuilderPanels

Shadows

Was this page helpful?
Previous

Gap

Next

Height

Built with

Boxes can have shadows to give them a more real-world, dimensional feel. Add shadows by clicking the “+” in the “Shadows” panel located in the sidebar.

Here are the following options for shadows:

  • Type: drop or inner shadow
  • Color
  • Direction
  • Distance: how far the shadow is from its element
  • Blur: the softness of the shadow
  • Spread: when blur is set to “0”, a larger size will act like a solid border

An element can have multiple shadows which can be layered and sorted, allowing you to add more realistic shadows or create unique effects.

Applying shadows to cards

Examples

You can change the color and angle of your shadow to add a glowing effect to a specific element.

Shadow angle and color

Pro tips

Avoid importing assets with shadows included in the original file, as this can be added in Makeswift.

Another tip is to lower the color opacity and use a higher blur to create softer, more realistic shadows.