Extract a Website's Gradient Styles

A reliable way to extract a website's gradient styles is to record each gradient as a small set of design decisions: colors, stops, direction, shape, opacity, and where it appears. Then compare those observations across the page instead of copying one screenshot and guessing.

Use this gradient checklist

For every visible gradient, capture:

1. Location: hero background, button, card, image overlay, text fill, border, or decorative shape.
2. Type: linear, radial, conic, or a blurred color field.
3. Direction: top to bottom, left to right, diagonal angle, or radial origin.
4. Colors: write the closest hex values and note which color starts and ends the blend.
5. Stops: record whether the transition is even or whether one color dominates most of the area.
6. Opacity: check whether the gradient sits over a solid background, image, or transparent layer.
7. Edges: note whether it fades to transparent, ends sharply, or is clipped by a rounded shape.
8. Usage: identify whether it communicates emphasis, depth, warmth, motion, or simply separates sections.

This produces a useful gradient inventory before you write any CSS. It also prevents a common mistake: treating every colorful area as a gradient when it may be a flat color, an image, a shadow, or a video frame.

Open the examples below and compare the first screen before borrowing a pattern. The Pangram AI Detector reference is paired with a muted green direction, and the accompanying observed colors range from deep greens such as #15502e and #14532d to lighter tones such as #2a966f and #799c92. Those values can help you describe a palette, but they should not be treated as proof that every area uses a gradient.

Turn observations into CSS

Use descriptive names rather than scattering raw values through a stylesheet:

The angle and stop positions above are a starting draft, not an extracted fact. Adjust them after comparing the result with the captured page. If the original fades into transparency, use a color with an alpha value or layer the gradient over the base background. If the color changes around a focal point, test a radial gradient instead.

For a design-system handoff, keep each entry together:

Label estimates clearly. Extracting observed styling is different from owning the website's official internal design system.

Check the result before reusing it

Compare the gradient at the same viewport size and on the same background. Check contrast for headings, buttons, and small text. A gradient that looks subtle behind a large heading may become distracting behind a compact card. Also check the transition at mobile widths, where a diagonal blend can place the lightest color behind an unintended element.

A good final review asks three questions: Does the gradient support the same content hierarchy? Does it preserve readable contrast? Can another designer understand where and why to use it without opening the original page?

Use this in your AI agent

> Inspect the captured website for every visible gradient. List each gradient's location, type, direction or origin, approximate color stops, opacity, clipping shape, and intended role. Separate confirmed visual observations from estimates, group repeated gradients into reusable tokens, and draft equivalent CSS variables and gradient declarations. Do not claim access to the site's private design system.

Install Fudge for your AI agent to inspect captured pages and turn observed styling into a practical handoff.

Separate the layers before naming anything a gradient. First identify the base color, then the image or video, then any translucent color wash, blur, shadow, or mask placed above it. A blurred overlay can look like a gradient in a screenshot but may be a large radial shape, a CSS filter, or an exported image.

For each section, record the layer order and sample colors from areas that are not affected by text or controls. Compare the same area across several frames if motion is present. If the colors move, note the behavior instead of forcing it into one static CSS value. If the color field stays fixed while the video changes, describe it as an overlay.

A useful handoff might say: base is a dark green, video sits above the base, a low-opacity radial wash is centered near the upper right, and a dark overlay protects text on the left. That description is more reusable than a single screenshot color. Recheck the result at desktop and mobile widths, because cropping can make a background image appear to have a different gradient direction.

Start with a short inventory, not a full stylesheet. Give each repeated gradient a stable name based on its role, such as hero-wash, card-highlight, or button-accent. Store the type, stops, direction, opacity, background requirement, observed locations, and confidence level together.

Then group related solid colors into a palette. For example, deep green, mid green, soft green, and neutral green can become palette tokens, while the gradients reference those tokens. Keep one-off decorative gradients separate from reusable interface gradients. This avoids turning every visual detail into a global token.

Before publishing the file, test each token behind the same text and controls used on the source page. Record any contrast adjustment as a usage note rather than silently changing the color. Finally, compare the token file with the page at two viewport sizes and mark anything that remains uncertain. The result should explain what was observed, what was estimated, and where the token is safe to reuse.

Related questions

• Extract a Website's Interaction Patterns
• Extract a Website's Design Tokens
• Extract a Website's Media Styles
• Extract a Website's Page Layout