Get the shadow styles from a live website

Contents

• [Use a small shadow checklist](#use-a-small-shadow-checklist)
• [Compare shadows against the actual background](#compare-shadows-against-the-actual-background)
• [Document values as ranges when needed](#document-values-as-ranges-when-needed)
• [Build a simple elevation system](#build-a-simple-elevation-system)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

You can get a live website's shadow styles by capturing representative components, comparing their edges against the background, and documenting blur, spread, opacity, color, and usage by component. Treat the result as an observed visual reference, because a screenshot can show the effect without revealing the site's exact CSS values.

Use a small shadow checklist

Inspect more than one surface before deciding that a site has one shadow style. Check a card, button, dropdown, modal, media frame, and any floating navigation. For each visible shadow, record:

• Which component uses it
• Whether it appears on all sides or mainly below
• How soft or sharp the edge looks
• How far the tone extends from the surface
• Whether the shadow is neutral, cool, warm, or tinted
• Whether a border or divider is doing part of the separation
• Whether the treatment changes on hover, focus, open, or scroll

This gives you a role-based list such as card elevation, floating panel elevation, and active control treatment instead of a pile of screenshots.

The examples below are useful for comparison. The supplied Linear captures show a near-black canvas, muted dividers, compact controls, and a cool accent. That combination may make separation rely on subtle borders and tonal changes as much as on shadows. Compare the edges of each surface carefully before assuming that a faint shadow is present.

Compare shadows against the actual background

A shadow is easy to misread when the page uses dark surfaces or gradients. Sample the same component against its surrounding background and ask:

1. Is the boundary visible because of a shadow, a border, or a color difference?
2. Does the effect continue behind transparent areas or stop at a rounded corner?
3. Is the lower edge darker because of elevation or because the component itself has a gradient?
4. Does the effect remain visible when the component moves over a different surface?

Capture open states for menus, dialogs, tooltips, and drawers. Closed-state screenshots often hide the strongest elevation treatment. Also check hover and focus states when they are available, because a control may use a small glow or darker outline rather than a conventional shadow.

Document values as ranges when needed

If you can inspect the page's styles directly, record the exact shadow declaration and the component role that uses it. If you only have a visual capture, use descriptions or approximate ranges:

Do not present an estimate as the site's official token. A practical design reference can say "soft lower elevation" or "low-contrast shadow over dark surface" and still be useful. If you are rebuilding the pattern, test the treatment on both light and dark backgrounds and at several sizes.

Build a simple elevation system

For a new interface, start with three or four roles rather than assigning a unique shadow to every component:

• Resting surface: no shadow or a very faint edge treatment
• Raised card: low blur and low opacity
• Floating panel: wider blur with a stronger lower offset
• Modal or overlay: strongest separation, often paired with a backdrop

Keep the radius and border relationship consistent. A strong shadow with a sharp corner can feel unrelated to a softly rounded card. Likewise, a dark shadow may disappear on a near-black canvas, so a muted border or surface step may be the clearer choice.

Typography and spacing still affect whether the result feels similar. The supplied Linear font reference identifies Inter at regular weight for body copy and controls, and medium weight for headings and emphasized interface text. Use those observations to match the surrounding rhythm, but verify the target capture before treating them as a general rule.

Use this in your AI agent

> Inspect the captured website for visible shadow and elevation treatments. Compare cards, controls, menus, dialogs, media frames, and floating elements. Return each role with observed color, offset direction, softness, spread, corner behavior, border relationship, state changes, and confidence. Distinguish exact style declarations from visual estimates, then propose a small role-based shadow system for a new interface. Install Fudge for your AI agent

Check how the edge behaves at corners and against nearby surfaces. A border usually follows the component's outline with a fairly even thickness, including around rounded corners. A shadow tends to fade outward, often appears stronger below the object, and may be uneven around the sides.

Compare the same component in several states. If the edge changes from a crisp line to a broad soft halo when the component opens or rises, the change is likely an elevation effect. If it stays the same width and simply changes color, it may be a border or outline.

Look for overlap as well. A dropdown shadow can remain visible over the page behind it, while a border only marks the dropdown's own boundary. On dark pages, increase the viewing scale and compare the edge with a nearby divider. The supplied Linear examples use muted dividers and dark surfaces, so separation may come from a combination of surface color and a very restrained shadow rather than one obvious effect.

When uncertain, label the note as "border or shadow, verify" instead of forcing a precise classification.

Start with roles, then tune against the actual background. For a resting card, try no shadow or a very low-opacity shadow with a small vertical offset. For a raised card, use a modest downward offset and medium blur. For a floating panel, increase the blur and offset while keeping the spread close to zero. For a modal, pair the strongest shadow with a backdrop so the surface does not depend on the shadow alone.

Use a near-black shadow only when the background is light enough to show it. On dark surfaces, test a faint neutral edge, a small surface-color change, or a subtle border alongside the shadow. Keep the radius matched to the component and avoid mixing very sharp shadows with soft, rounded surfaces.

Record the final values by role, not by individual selector. Then test them at normal page scale, in a dense layout, and over the page's darkest and lightest surfaces. The goal is a consistent elevation ladder that supports the layout, not a literal claim about the original site's private style tokens.

Related questions

• Get the Spacing Scale From a Live Website
• Get the page layout from a live website
• Get the Typography System from a Live Website
• Get the media styles from a live website