Color gradient
See also: Ombr
In computer graphics, a color gradient (sometimes
An axial color gradient, with a white line segment connecting the
two points
A linear, or axial, color gradient
called a color ramp or color progression) species a
range of position-dependent colors, usually used to ll a
region.[1] For example, many window managers allow the
screen background to be specied as a gradient. The col-
ors produced by a gradient vary continuously with posi-
tion, producing smooth color transitions.
1 Axial gradients
An axial color gradient (sometimes also called a linear
color gradient) is specied by two points, and a color
at each point. The colors along the line through those
points are calculated using linear interpolation, then ex-
tended perpendicular to that line. In digital imaging sys-
tems, colors are typically interpolated in an RGB color
space, often using gamma compressed RGB color values,
as opposed to linear. CSS and SVG both support linear
gradients.[2][3] A radial color gradient
2 Radial gradients
A radial gradient is specied as a circle that has one color center. This can be used to approximate the diuse re-
at the edge and another at the center. Colors are calcu- ection of light from a point source by a sphere. Both
lated by linear interpolation based on distance from the CSS and SVG support radial gradients.[4][5]
1
2 5 REFERENCES
3 Other shapes
In some specialized occasions it is appropriate to grab a
color gradient that takes two of three colors at the ra-
dius of a polygon or other shape and that doesn't forget
the aspect of a dierent color, preferably the fourth, to-
wards the interior of the radius or such a gradient may
be removed by combining multiple color gradients, with
the straight skeleton of the polygon used to determine the
boundaries between pairs of axial gradients.[6]
In vector graphics polygon meshes can be used, e.g.,
Adobe Illustrator supported gradient meshes.
4 See also
Image gradient
Color banding
Posterization
Diusion curve
5 References
[Link] Background Image Color Over-
lay
[1] Eisenberg, J. David (2002). SVG Essentials. O'Reilly Me-
dia. p. 107. ISBN 0-596-00223-8.
[2] Linear Gradients in CSS Image Values and Replaced
Content Module Level 3, W3C Candidate Recommen-
dation, April 2012
[3] Linear Gradients in SVG 1.1 (Second Edition)", W3C
Recommendation, August 2011
[4] Radial Gradients in CSS Image Values and Replaced
Content Module Level 3, W3C Candidate Recommen-
dation, April 2012
[5] Radial Gradients in SVG 1.1 (Second Edition)", W3C
Recommendation, August 2011
[6] Asente, Paul; Carr, Nathan (2013), Creating contour
gradients using 3D bevels, Proceedings of the Sympo-
sium on Computational Aesthetics (CAE '13, Anaheim,
California), New York, NY, USA: ACM, pp. 63
66, doi:10.1145/2487276.2487283, ISBN 978-1-4503-
2203-4.
3
6 Text and image sources, contributors, and licenses
6.1 Text
Color gradient Source: [Link] Contributors: Bearcat, Xezbeth, Jacobolus,
Rjwilmsi, NeonMerlin, JabberWok, Chris Chittleborough, Adam majewski, Tgdwyer, Ianmacm, Dicklyon, FleetCommand, Ibadibam,
Gaijin42, Magioladitis, David Eppstein, Motine, ClueBot, [Link], Addbot, Jasper Deng, AnomieBOT, The Wiki ghost, Teuxe,
FoxBot, EmausBot, Eekerz, Ort43v, ClueBot NG, Be..anyone, Helpful Pixie Bot, Mark viking, Mouseandplug and Anonymous: 14
6.2 Images
File:Folder_Hexagonal_Icon.svg Source: [Link] License: Cc-by-
sa-3.0 Contributors: ? Original artist: ?
File:[Link] Source: [Link] License: CC-BY-SA-3.0 Contributors:
Own work Original artist: Thomas Steiner
File:[Link] Source: [Link] License: CC BY-SA 3.0
Contributors: Own work Original artist: Chris Chittleborough
File:[Link] Source: [Link] License: Public domain Contributors: ?
Original artist: ?
File:[Link] Source: [Link] License: CC BY-SA 3.0
Contributors: Own work Original artist: Chris Chittleborough
File:[Link] Source: [Link] License: GPL Contributors: [1] Original
artist: en:User:Burgundavia
File:[Link] Source: [Link]
svg License: CC BY-SA 3.0 Contributors: Own work Original artist: User:Bastique, User:Ramac et al.
6.3 Content license
Creative Commons Attribution-Share Alike 3.0
