Extract a Website's Shadow Styles

Contents

• [Start with repeated surfaces](#start-with-repeated-surfaces)
• [Turn observations into roles](#turn-observations-into-roles)
• [What to record](#what-to-record)
• [Avoid false precision](#avoid-false-precision)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

To extract a website's shadow styles, inspect repeated surfaces such as cards, menus, dialogs, inputs, and sticky headers, then record each shadow by role rather than copying isolated CSS declarations. The useful result is a small shadow scale that describes where elevation appears, how strong it is, and which surfaces use it.

Start with repeated surfaces

Make a list of the page elements that appear to sit above the main background:

1. Cards or feature panels
2. Navigation bars and popovers
3. Dialogs, drawers, and menus
4. Buttons or inputs with raised treatment
5. Sticky elements that overlap page content
6. Focus, hover, and selected states

For each element, capture the visible treatment and its context. Note whether the shadow is the main cue for elevation or whether the design uses a border, background change, blur, or contrast instead. A dark interface may use very soft shadows because a bright outline or surface change carries more of the hierarchy.

Open the examples below and compare the first screen before borrowing a pattern. The captured Linear references show a near-black canvas, muted dividers, compact controls, and one cool accent. They are useful for studying surface separation, but they do not provide verified shadow values for every component.

Turn observations into roles

Instead of naming styles shadow-1, shadow-2, and shadow-3 immediately, describe what each one does:

• Surface lift: a subtle separation for cards or grouped content
• Floating control: a clearer edge for menus, tooltips, or popovers
• Dialog elevation: the strongest separation for a modal or drawer
• Focus treatment: a temporary outline or glow that supports keyboard and interaction states
• Inset treatment: an inner shadow that suggests depth inside a field or control

Then check whether the same treatment appears across several components. A shadow used once may be a local detail. A shadow repeated on cards and panels is more likely to belong to the site's broader visual language.

What to record

For each observed style, save a short entry with:

• Component or surface role
• Shadow direction and spread
• Blur softness
• Opacity or perceived strength
• Shadow color, especially whether it is neutral, warm, cool, or tinted
• Whether it is single-layer or built from multiple layers
• States where it appears or disappears
• Nearby border, background, and radius values

Use plain names such as surface-lift, floating-control, and dialog-elevation. If you later move the result into CSS or Tailwind, keep the original observation beside the token so another designer can check the source.

Avoid false precision

A screenshot can show that a card has soft separation, but it cannot always prove the original blur radius, alpha, or spread. Treat extracted values as observed design details unless you have the site's source styles or a captured inspection that exposes the underlying declarations. Do not present the result as the website's official internal design system.

A practical review checklist is:

• Does the shadow repeat across more than one component?
• Is the element actually elevated, or is contrast doing the work?
• Does the style still make sense on the site's light and dark surfaces?
• Does the effect remain useful at smaller sizes?
• Does the focus state need a separate accessible indicator?
• Can the token name explain its purpose without referring to one page?

For a working handoff, produce a table with the role, observed treatment, example component, confidence, and proposed token name. If you want an agent to help organize that table from saved captures, install Fudge for your AI agent and give it the pages or references to review.

Use this in your AI agent

> Review the saved website captures for repeated shadow treatments. Group them by practical role such as surface lift, floating control, dialog elevation, focus treatment, and inset treatment. For each group, report the components where it appears, the visible strength and softness, color character, related borders or backgrounds, interaction states, and confidence. Separate directly observed details from proposed reusable CSS or Tailwind token names, and do not claim the result is the site's official design system.

Install Fudge for your AI agent

Start with role-based variables, then keep the observed value and your reusable proposal separate. For example:

Those values are only a template, not measurements from a particular website. Replace them with values you can verify from source styles or a careful capture. Keep the token names tied to use, not strength, so the system remains understandable if the visual scale changes.

If the site uses layered shadows, preserve the layers when they clearly serve different purposes, such as a close contact shadow plus a broad ambient shadow. Test the variables on the actual background colors. A shadow that looks balanced on white may disappear on a dark surface, where a border or surface contrast may be more effective. Also define focus separately when a shadow alone would be hard to see or would not meet your interface requirements.

Ask it to compare several components and distinguish repeated patterns from one-off decoration. A useful review should check cards, menus, dialogs, inputs, hover states, and focus states rather than relying on one screenshot.

It should also ask whether the apparent elevation comes from a shadow, a border, a background shift, blur, or a combination. That prevents you from copying a shadow that only looks visible because of surrounding contrast. Have the agent report uncertainty when exact blur, spread, or opacity cannot be verified, and label any proposed token as an adaptation rather than an official value.

Finally, ask for a compact handoff: role, affected components, observed treatment, source reference, confidence, proposed variable name, and a short note about dark or light surfaces. This gives you enough information to test the style in your own interface without pretending to own the original site's internal design rules.

Related questions

• Extract a Website's Spacing Scale
• Extract a Website's Page Layout
• How to Extract a Website's Typography System
• Extract a Website's Media Styles