Gradient Design

Gradient Design

"Color in motion. Fluid transitions that add energy and depth to flat surfaces."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Gradients are the Primary Visual: Backgrounds, buttons, text, and borders all use gradients instead of solid colors.
2. Analogous or Complementary Blends: Gradients must be carefully chosen so the transition colors don't become muddy (e.g., blending red to green creates a muddy brown in the middle. Blend red to yellow to green instead).
3. Subtle Animation: Background gradients should slowly shift and rotate.

Visual DNA

• Colors: Warm Tech (blues to oranges) or create custom vibrant pairs (e.g., Purple to Coral, Deep Blue to Cyan).
• Typography: Clean, heavy sans-serifs that can be easily masked with a gradient fill.
• Layout: Keep the UI structure minimal (glass panels or white/black cards) to let the gradients breathe.

Web Implementation

• CSS Example:

body {
  /* Complex mesh-like animated gradient */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: #fff;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(90deg, #F9D423 0%, #FF4E50 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4rem;