Capture Shadow Styles From a Live Website for Reuse

Contents

• [A practical capture method](#a-practical-capture-method)
• [What to compare before reuse](#what-to-compare-before-reuse)
• [Reuse checklist](#reuse-checklist)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

Capture shadow styles by documenting where each shadow appears, what it separates, and which surrounding colors make it work. Do not copy one shadow from one component and apply it everywhere. Record a small set of roles such as surface lift, floating control, dialog, and focus treatment, then test each role against the same background.

A practical capture method

1. List the surfaces first. Mark cards, navigation, menus, dialogs, floating buttons, and any element that appears above the page. Note whether separation comes from a shadow, border, background change, or combination.
2. Record the complete shadow. Capture offset, blur, spread if present, color, opacity, and whether there are multiple layers. Similar strength can produce very different results when one shadow is soft gray and another is dark translucent.
3. Record the surrounding conditions. Save the surface color, page background, border, radius, and nearby spacing. The same shadow can look heavy on white and disappear on a dark surface.
4. Group by purpose. Use names such as elevation-sm, elevation-md, overlay, or focus-ring. Keep the names tied to use, not to one page section.
5. Test the values in a small fixture. Put the captured styles on a card, dropdown, dialog, and button state at the same scale before adding them to a shared stylesheet.

The immediate output should be a short table:

The captured Linear references are described as using a near-black canvas, muted dividers, compact controls, and one cool accent. That context helps you decide whether a shadow creates real separation or only decoration. It does not establish exact shadow values.

What to compare before reuse

Check four things side by side: contrast, spread, edge softness, and consistency. Contrast asks whether the surface is separated without looking detached. Spread asks whether the shadow stays near the component or creates a large halo. Edge softness asks whether the blur fits the interface's density. Consistency asks whether related components use the same role.

On dark interfaces, a lighter border or subtle highlight may create more separation than a traditional black shadow. On light interfaces, a low-opacity shadow may be enough. Avoid making every elevation stronger because a dialog needs more depth. Use the role table to keep the hierarchy intentional.

Reuse checklist

Before adding captured shadows to a shared stylesheet, confirm:

• The shadow is observed on more than one relevant component, or is labeled as a one-off.
• Its background and surface colors are recorded.
• Multiple shadow layers remain separate when they serve different jobs.
• Focus styling is documented separately from depth styling.
• The value has been tested at the target viewport size.
• The result still works with borders, rounded corners, reduced motion, and high-contrast preferences.
• The source is treated as visual reference, not proof that you own the original site's internal design system.

A captured website can help you inspect page structure, components, colors, borders, radii, shadows, and gradients. For a repeatable workflow, capture the page, inspect the relevant components, compare repeated treatments, and export only the observed details you can verify. Add the page through the browser extension when you need to inspect a source that is not already captured.

Use this in your AI agent

> Inspect the captured website for shadow styles. List each observed shadow by component and purpose, including color, opacity, offset, blur, spread, layer count, surface color, background color, border, and radius when available. Group repeated values into suggested elevation roles, separate focus rings from depth shadows, flag one-off treatments, and finish with a compact CSS token table. Do not invent values that are not observable.

Use Fudge with your AI agent

Start with roles, not component names. A useful first pass might include --shadow-surface, --shadow-floating, --shadow-overlay, and --focus-ring, but keep a role only when the captured examples support it.

For each token, store the full declaration rather than separate guesses:

Test the tokens with the same card, menu, dialog, and focus examples on both the original background and your product background. If two shadows differ only slightly, prefer one shared role and note the exceptions. If they differ in purpose or layering, keep them separate. Label the result as a documented reference set until your team confirms naming, accessibility, browser behavior, and ownership.

Ask for a comparison that separates observation from interpretation. The agent should list the component, page state, surface color, background color, border, radius, and visible shadow layers before comparing offset, blur, spread, color, opacity, and apparent strength.

A useful instruction is: “Compare the captured pages component by component. Identify repeated shadow treatments, explain where the background or border changes the appearance, and group only values that are visibly consistent. Mark uncertain or one-off observations instead of filling gaps.”

Also ask it to check hierarchy. A menu should not accidentally look heavier than a dialog, and a focus ring should remain identifiable as focus rather than depth. Finish with a short implementation checklist and a table of directly observed values for designer review.

Related questions

• Capture a spacing scale from a live website for reuse
• Capture a Website Typography System for Reuse
• Extract a Website's Border Radius Scale
• Extract a Website's Color System