Give Claude Code a Website's Gradients and Backgrounds

Contents

• [Start with a visual inventory](#start-with-a-visual-inventory)
• [Describe gradients precisely](#describe-gradients-precisely)
• [Separate layers from effects](#separate-layers-from-effects)
• [Give Claude Code an implementation brief](#give-claude-code-an-implementation-brief)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

Give Claude Code a website's gradients and backgrounds by first collecting the exact visual evidence, then turning it into a compact implementation brief. Record the gradient direction, color stops, background layers, opacity, blend behavior, and where each treatment appears so Claude Code can reproduce the result instead of guessing.

Start with a visual inventory

Make a list of every background treatment you want to pass on:

• Page-wide background color or gradient
• Hero background and any decorative glow
• Section backgrounds that alternate between tones
• Card fills, borders, and translucent overlays
• Buttons, badges, navigation surfaces, and footer treatments
• Images, textures, masks, or clipped shapes behind content

For each item, write its location and purpose. For example: "Hero background, dark green base, soft lighter glow toward the upper right, behind the main heading." This is more useful than saying "make it feel like the reference."

The examples below include captured references for Notion Developer Platform, Claude Code, and Exa MCP Server, plus a green color set. Use them as comparison material, not as a claim that they represent the exact site you are building. Compare the broad background mood first, then check whether the color relationships, contrast, and placement fit your own page.

Describe gradients precisely

A usable gradient note should answer five questions:

1. What is the base color?
2. Which colors appear in the transition?
3. Where does the transition begin and end?
4. What direction or shape does it follow?
5. Which content sits above it?

A practical CSS-ready description might look like this:

> Background: #233f2a base. Add a radial highlight using #2a966f at 0% opacity 0.42 near 78% 12%, fading to transparent by 58%. Layer a subtle linear gradient from #14532d at the top to #0f2417 at the bottom. Keep the text area clear enough for light text.

Treat the supplied colors as observations to compare, not as a finished palette. The darker greens can support large surfaces, while brighter greens may work better as a glow or accent. Check the transition against both headings and smaller text before keeping it.

Separate layers from effects

Tell Claude Code which details belong to the background itself and which belong to an overlay. A background can include a solid fill, one or more gradients, a noise texture, a blurred shape, and a transparent panel above it. If those layers are mixed into one vague instruction, the implementation becomes hard to tune.

Use a small table in your brief:

Also note responsive behavior. Say whether the glow moves, crops, or disappears on narrow screens. State whether the background should remain fixed or scroll with the section. These decisions prevent a desktop treatment from becoming distracting on mobile.

Give Claude Code an implementation brief

Copy this structure into your coding conversation:

> Recreate the background system from my captured reference. Start with a named base color, then add the listed gradients as separate layers. For every gradient, use explicit color stops, direction, position, opacity, and blur. Keep text contrast readable. Apply the treatment only to the named sections. On small screens, reduce glow size and intensity rather than allowing it to cover the content. Return the CSS variables and component-level styles, then explain which values I should adjust for a closer visual match.

Before accepting the result, compare the implementation at the same viewport size as the reference. Check the top of the page, the transition between sections, text contrast, card edges, and mobile cropping. If the page feels too bright, adjust opacity or the highlight stop before changing every color. If it feels flat, add separation between layers rather than adding more unrelated colors.

Use this in your AI agent

> Inspect the captured website references and extract only the observed gradients, background colors, overlays, blur effects, section placement, and responsive behavior. Compare the examples below before writing a CSS-ready brief. Give me named variables, explicit gradient stops, positions, opacity values, and a short implementation plan for Claude Code. Mark anything uncertain as a check I should verify rather than inventing it.

Install Fudge for your AI agent

Use one record per surface, ordered from the page background to the smallest decorative detail. For each record, include a name, selector or section, base color, gradient type, stops, direction, position, opacity, blur, and responsive rule.

A useful starting set is:

• page-bg: the global color and any full-page gradient
• hero-glow: the main radial or conic highlight
• section-wash: a low-contrast transition between blocks
• card-surface: panel fill, border, and transparency
• cta-accent: button or link treatment

For a dark developer page, keep the page background and content panels distinct even when both are green or charcoal. Use the brightest color for a controlled focal point, not as a full-screen fill. Check code samples and small labels separately because they can lose contrast before large headings do.

Write mobile rules beside the desktop values: reduce radius and blur, move the glow away from text, and lower opacity if the effect becomes a bright patch. This gives Claude Code a clear set of edits instead of a visual impression to interpret.

Review the result in the same viewport dimensions and use a short checklist:

1. Does the base color match before the gradients are considered?
2. Do the brightest areas land in the same general locations?
3. Are the color stops smooth, or is there an unwanted band?
4. Can headings, body text, links, and code remain easy to read?
5. Do cards separate from the page without looking opaque?
6. Does the effect stay behind the intended section?
7. Does mobile cropping preserve the subject and the content hierarchy?
8. Does reduced motion or a simpler fallback still look deliberate?

Change one variable group at a time. First correct placement, then intensity, then color. If the background still feels wrong, compare the section boundaries and panel opacity before adding another gradient. Save the final values as named variables so future pages can reuse the same system without copying unexplained declarations.

Related questions

• Give Claude Code a Website's Image and Video Use
• Give Claude Code a Website's Component Styles
• Give Claude Code a Website's Motion and Interactions
• Give Claude Code a Website's Color Roles