layeredgradient

Layeredgradient is a term used in design and computer graphics to describe a gradient that is formed by combining multiple gradient layers. Each layer defines its own color progression, often with distinct color stops, opacity, and blending characteristics. The result is a richer, more nuanced transition than a single gradient can provide.

Construction typically treats each layer as a gradient function defined over a domain, accompanied by an opacity value and a blending mode. The final color is obtained by alpha blending the layers in order, so the order of layering affects the outcome. In many systems, simple linear combinations approximate the effect.

Layered gradients appear in various contexts, including web design with CSS or SVG, where multiple gradient functions are stacked as separate layers; in raster and vector graphics software, as adjustable layers with individual opacity and blend modes; and in visualizations to encode depth, texture, or intensity.

Advantages of layered gradients include finer control over color transitions, easier editing of specific regions, and the ability to simulate complex lighting or material effects. Drawbacks can include increased computational or editing complexity and potential color management challenges when combining layers.

Related concepts include color stops, alpha compositing, blending modes, and multi-layer gradients in software such as CSS, SVG, Photoshop, and illustration tools.