# Inspect a website's gradients and backgrounds from its URL [Open the live Fudge conversation](https://design.withfudge.com/share/inspect-a-website-s-gradients-and-backgrounds-from-its-url) Last updated: 2026-08-25 To inspect a website's gradients and backgrounds from its URL, separate the visible layers and record each layer's color, position, size, opacity, blend, and relationship to the content above it. Compare the background across sections and states before deciding whether it is a reusable rule or a one-off treatment. ## Start with the layer order Review the page from back to front. Identify the base canvas, section surfaces, gradients, images, patterns, glows, overlays, borders, and content. A useful note might look like this: 1. Base page color 2. Section background 3. Large gradient or radial glow 4. Image or texture 5. Dark or light overlay 6. Content surface, card, or control 7. Border and shadow Also note where each treatment begins and ends. A glow may sit behind only the hero, while a base color continues through the full page. Similar colors can look very different when one background uses an overlay or translucent surface. The Pangram capture below provides a concrete reference for describing color direction. Its associated palette includes deep forest greens, darker olive-green tones, softer gray-green colors, and a lighter blue-green accent. Use it to study how a palette can be described by roles and range, not as a claim about every page or state on that site. ## Captured pages [![Pangram AI Detector](https://pin.fontofweb.com/9687?format=jpg)](https://design.withfudge.com/share/pin-9687) [Pangram AI Detector](https://design.withfudge.com/share/pin-9687) ## Colors - `#496c10` - `#15502e` - `#14532d` - `#233f2a` - `#254f1a` - `#1e6f30` - `#295631` - `#556659` - `#4a5a4a` - `#2c7a4a` - `#2a966f` - `#799c92` ## Describe gradients precisely For every gradient, record: - **Type:** linear, radial, conic, mesh-like, or image-based - **Direction:** top to bottom, left to right, diagonal, or centered - **Stops:** approximate colors and their order - **Position:** where the strongest area sits - **Spread:** how far the effect reaches before fading - **Opacity:** solid, translucent, or layered - **Blend:** normal, lightening, darkening, or uncertain - **Crop behavior:** whether the treatment changes at different widths Explain the gradient's job instead of calling it simply “green” or “blue.” A low-opacity green radial glow near the upper right may focus a hero while preserving readable light text. A vertical fade may guide attention toward an action. A repeated surface gradient may give cards depth without a heavy shadow. When exact CSS values are unavailable, use relationships such as “the center is brighter than the edges” or “the lower stop is close to the page background.” Ranges and visual relationships are more reliable than invented stop positions from a screenshot. ## Turn colors into roles Create a role-based palette with names such as `canvas`, `section-surface`, `elevated-surface`, `gradient-start`, `gradient-end`, `accent`, `text-primary`, `text-muted`, `border-subtle`, and `overlay`. Connect each role to a specific place on the page. For the green example, darker greens can support deep surfaces, mid greens can carry accents, and gray-green values can soften borders or secondary text. Test each assignment against the actual content. A color that looks attractive in a swatch may fail behind small text or a thin border. ## Check responsiveness and contrast Inspect the same background at multiple viewport sizes. Look for gradients that shift their focal point, become too strong behind a heading, expose a hard edge, or disappear behind a cropped image. Check overlays over light and dark content, and verify that cards remain distinct from the section underneath them. If a background sits behind text or controls, check readable contrast in default, hover, focus, and disabled states. Remove decorative layers temporarily to confirm that the content hierarchy still works. Observed colors and gradients can guide an original recreation, but they do not establish ownership of an official internal design system. Verify asset rights before shipping. ## Use this in your AI agent > Inspect the website at [paste URL] for its background system. Identify the base canvas, section surfaces, gradients, images, textures, overlays, borders, and shadows. For every gradient, describe type, direction, color stops, focal position, opacity, layering, and responsive behavior. Group colors by visual role, check text contrast, separate repeated rules from one-off treatments, and finish with CSS-ready recommendations for an original implementation. [Install Fudge for your AI agent](/mcp) to inspect captured website references while you work. --- Compare the treatment across widths and page states. A CSS gradient often keeps a smooth relationship between its stops while changing shape or position with the container. An image may reveal fixed detail, texture, compression, or a crop that moves with the viewport. Several layers may show a flat base color underneath a glow, pattern, photo, or translucent overlay. Look for repeating behavior. If the same color transition appears behind multiple sections with different content, it may be a shared background rule. If the detail aligns with a specific illustration or has a hard crop, it is more likely an image or masked asset. If the page remains recognizable when decorative details disappear, the base and overlay layers are probably separate. Record uncertainty explicitly. Say “appears to be a radial gradient over a solid surface” when you cannot verify the source. Then test an original recreation using a solid base, one gradient, and one overlay in that order. Add complexity only when the simpler version cannot match the observed depth, focal point, or contrast. --- First recreate the role, not the screenshot. Decide whether the background should create focus, separate sections, soften a surface, support text contrast, or add atmosphere. That decision tells you how strong the gradient should be and where its focal point belongs. Use a small token set: one canvas color, one surface color, one accent family, and one overlay color. Start with a single linear or radial gradient. Place its brightest area near the intended focal content, then reduce opacity until text and controls remain clear. Add a second layer only if it solves a specific problem, such as separating a card from the page. Test the result with a long heading, a button, an image, keyboard focus, a narrow viewport, and any relevant light or dark variant. Remove the gradient temporarily to confirm the page hierarchy still works. Document the observable rule in plain language: where the glow sits, which sections use it, which colors play each role, and how it changes on smaller screens. This gives developers enough direction to build an original background without claiming access to private design files. ## Related questions - [Inspect a Website's Image and Video Use from Its URL](/share/inspect-a-website-s-image-and-video-use-from-its-url) - [Inspect a website's component styles from its URL](/share/inspect-a-website-s-component-styles-from-its-url) - [Inspect a website's color roles from its URL](/share/inspect-a-website-s-color-roles-from-its-url) - [Inspect a Website's Page Layout from Its URL](/share/inspect-a-website-s-page-layout-from-its-url)