Agent skill
layered-backgrounds
Use when creating hero sections, landing pages, or premium visual effects. Covers gradient orbs, blur layers, noise textures.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/layered-backgrounds
SKILL.md
Layered Backgrounds
Agent Workflow (MANDATORY)
Before implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Check existing background patterns
- fuse-ai-pilot:research-expert - CSS filter and blend modes
After: Run fuse-ai-pilot:sniper for validation.
Overview
| Layer | Z-Index | Purpose |
|---|---|---|
| Content | z-10 | UI elements |
| Noise | z-5 | Grain texture |
| Glass | z-0 | Surface |
| Orbs | z-[-1] | Color blobs |
| Base | z-[-2] | Gradient |
Quick Reference
Gradient Orbs
<div className="absolute inset-0 -z-10 overflow-hidden">
<div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px]
bg-primary/30 rounded-full blur-3xl" />
<div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px]
bg-accent/20 rounded-full blur-3xl" />
</div>
Animated Orbs
<motion.div
className="absolute w-[600px] h-[600px] bg-primary/30 rounded-full blur-3xl"
animate={{ x: [0, 100, 0], y: [0, -50, 0] }}
transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
/>
Noise Overlay
<div
className="absolute inset-0 opacity-[0.03] pointer-events-none"
style={{
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
}}
/>
Complete Hero Background
function HeroBackground() {
return (
<>
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-background to-muted" />
<div className="absolute inset-0 -z-10 overflow-hidden">
<div className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl" />
<div className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px] bg-accent/15 rounded-full blur-3xl" />
</div>
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.02] mix-blend-overlay" />
</>
);
}
Dark Mode
<div className="bg-primary/20 dark:bg-primary/30 blur-3xl" />
Validation Checklist
[ ] Multiple layers with z-index separation
[ ] Gradient orbs with blur (blur-2xl or blur-3xl)
[ ] Colors from CSS variables
[ ] Overflow hidden on container
[ ] Dark mode variant defined
Best Practices
DO
- Use CSS variables for colors
- Add overflow-hidden to container
- Use will-change for animated orbs
- Reduce blur on mobile
DON'T
- Hard-code colors
- Forget overflow control
- Skip dark mode
- Use too many orbs (max 3)
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?