# Gradient Design

> Gradient usage, mesh gradients, gradient mapping, and avoiding gradient cliches.

- Skill: `dragoon0x/gradient-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/gradient-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/gradient-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/gradient-design

---


# Gradient Design

## Gradient Principles

### When Gradients Work
- Background atmosphere (subtle, large area).
- Data visualization (heat maps, scales).
- Brand accents (signature gradient = brand recognition).
- Depth and dimension.

### When They Don't
- Text backgrounds (readability issues).
- Small UI elements (gets muddy).
- "Because it looks cool" (needs purpose).

## Gradient Types
- **Linear:** Two colors along a direction. Clean, simple.
- **Radial:** From center outward. Focal point effect.
- **Conic:** Around a center point. Clock-face effect.
- **Mesh:** Multiple color points blended. Organic, complex.

## Building Good Gradients
1. Use analogous colors (neighbors on the color wheel). They blend naturally.
2. Avoid complementary gradients (red→green = brown muddy middle).
3. Add a mid-point color to control the transition.
4. Test on both light and dark backgrounds.
5. Check contrast of any text over the gradient.

## Cliches to Avoid
- Purple-to-pink (overused AI/tech default).
- Rainbow gradients (unless specifically on-brand).
- Gradient on every element (one gradient surface per view is usually enough).