Why gradients fail and how to fix them
Most gradient failures come from working in RGB color space, which is the default for CSS linear-gradient. RGB interpolation produces visually muddy transitions between colors that are far apart on the hue wheel because the math crosses through the gray center of the color space. A gradient from blue (#0000FF) to yellow (#FFFF00) produces a gray midpoint in RGB. The fix is to specify the color space: in modern CSS, `linear-gradient(in oklch, ...)` or `linear-gradient(in hsl, ...)` interpolates through a perceptually uniform path, producing vivid midpoints that feel natural to the eye. OKLCH in particular produces the most consistently luminous transitions across the full hue range and is the recommended choice for gradients with large hue differences.
Two-color vs multi-stop gradients
Two-color gradients are the most controllable: one start value, one end value, and a clear perceptual path between them. They work well for hero backgrounds, cards, and button states. Multi-stop gradients (3-5+ colors) create more atmospheric and complex surfaces but require careful planning. Each transition between stops must be considered independently — a gradient that works from blue to purple to rose may fail at the blue-to-purple transition (muddy midpoint) even if the purple-to-rose transition is clean. The practical approach: design each adjacent pair as if it were a two-color gradient, then chain them. Using identical lightness across stops (only varying hue) produces the smoothest multi-stop transitions.
Gradient direction and spatial hierarchy
Gradient direction communicates hierarchy and orientation. Top-to-bottom gradients (dark at top, light at bottom, or reversed) create natural spatial grounding — darker top simulates overhead light, lighter top simulates floor reflection. Left-to-right gradients create directional movement and are useful for progress indicators, timelines, and multi-step interfaces. Radial gradients (from center outward) create focal depth and work well for hero sections where the visual focus should be centered. Diagonal gradients (135°-150°) feel dynamic and contemporary — they are the most common choice for SaaS hero backgrounds. Choosing direction deliberately rather than defaulting to 90° produces gradients that feel designed rather than generated.
Mesh gradients: technique and use cases
Mesh gradients are created by blending multiple soft radial color sources across a surface. In Figma, this means overlaid radial gradients at low opacity with blend modes. In CSS, it is approximated with multiple radial-gradient() layers in the background property, or achieved precisely with SVG mesh gradient elements. The aesthetic works best with: 3-5 color nodes rather than 10-12 (fewer nodes, more coherent result), analogous or adjacent hue selections (colors within 60-90° of each other), significant lightness variation between nodes (one light, two mid, one dark node), and subtle animation if used in motion contexts. Mesh gradients read as broken when the hue range is too wide (complementary colors produce muddy blends), when all nodes have similar lightness (no depth), or when the grain texture (often added for surface quality) is too coarse.
Gradients and brand systems
A gradient should be derivable from the flat palette, not designed independently. Best practice: define the gradient as a formula applied to existing palette colors — for example, the brand's primary vivid at 100% opacity fading to the secondary soft variant at 0% opacity. This approach ensures the gradient reads as an extension of the palette rather than an independent element. Store the gradient formula in the design token system alongside flat colors. For multi-brand systems, define gradient templates (direction, opacity curve, number of stops) as tokens, then apply them to each brand's color palette to produce on-brand variants without redesigning from scratch.
