Adding Shadows and Effects

Great exhibits don't just inform — they draw visitors in visually. Whether you're designing a touch-screen kiosk for a natural history museum, an interactive timeline for a gallery, or a wayfinding display in a cultural center, shadows and visual effects help your components feel grounded, layered, and intentional. In Zibit, shadows and effects are defined once in your style set and applied consistently across your entire project — so a change you make in one place ripples through every moment automatically.

Exploring the Style Editor

The Style Editor is where you define the visual identity for your project. The left panel organizes your settings into sections — Typography, Colors & Scheme, Shadows & Effects, Animations & Transitions, and styles for every component type, from Basic elements like text and images to Interactive ones like timelines and buttons.

The live preview on the right updates as you make changes, so you can see exactly how your style set looks in practice — no guesswork needed. Everything you adjust here can be changed at any time, and updates apply instantly across every moment in your project.

Adding Shadows and Effects

The Shadows & Effects panel lets you define reusable shadows for your style set — perfect for giving depth to cards, overlays, and interactive components in your museum exhibit. Any shadows you've already added appear at the top of the panel, and you can click "Add shadow" to create a new one. Adjust each shadow's color, blur, spread, and offset to match your experience's visual tone.

Below the shadows list, you'll find the Effects section, where you can apply global treatments like blur or brightness across components. Don't worry — every shadow and effect you set here can be updated at any time without affecting your moments directly until you reassign the style set.

Name and Configure Your New Shadow

A new shadow row has appeared in the Shadows & Effects section, ready for you to set up. Start by giving it a descriptive name — something like "Card Lift" or "Panel Depth" — so it's easy to identify when applying it to components later.

Next, adjust the offset, blur, and color values to get the look you're after. These settings control how far the shadow is cast, how soft its edges appear, and what color it uses. Don't worry about getting it perfect right away — you can come back and tweak any shadow in your style set at any time.

Fine-Tune Your Shadow Settings

With the shadow editor popover open, you can dial in exactly how a shadow looks across your project. Use the Horizontal and Vertical offset sliders to position the shadow, adjust Blur to soften or sharpen its edges, and toggle Inset to flip the shadow inside a component — great for giving buttons or panels a pressed or recessed feel in exhibit interfaces.

Click the color swatch to open the color picker and choose a shadow color that fits your style set's palette. Every change previews live in the canvas, so you can experiment freely. Nothing is locked in until you move on, and you can always come back to tweak these values later.

Adding Visual Effects to Your Style Set

The Shadows & Effects section lets you layer advanced visual treatments on top of your style set. You can apply effects like blur, opacity, grayscale, or a blend mode to give your exhibit a polished, distinctive look — perfect for atmospheric museum displays or branded digital signage.

Scroll to the Shadows & Effects panel and choose the effect type you want from the dropdown, then adjust its value and click "Add effect" to apply it. You can add multiple effects at once, and remove any of them at any time using the delete control — so feel free to experiment.

You've now built a reusable shadow and effects system that keeps your project looking polished and consistent — no matter how many moments you add later. Because everything lives in your style set, you can update the look of your entire project at any time without touching individual components. Here are some great next steps to keep building on what you've created:

• Apply your shadows to components — Select any component in a moment and use the style panel to assign one of your named shadows, instantly adding depth to buttons, image frames, or content cards.
• Experiment with multiple shadow layers — Stack a soft ambient shadow with a tighter directional shadow on the same component for a more realistic, dimensional look.
• Try visual effects on media components — Apply blur or color overlay effects to image and video components to create atmospheric backgrounds in your moments.
• Duplicate and adapt your style set — If you're building a family of related exhibits, duplicate your project's style set as a starting point so shadows and effects stay on-brand across experiences.
• Combine with your typography and color settings — Shadows work best when they complement your overall palette; revisit your style set's color definitions to make sure shadow tones harmonize with your design.