Scribd
Upload
238 views

Color Gradient: 1 Axial Gradients

1. Color gradients specify a range of position-dependent colors to fill a region, producing smooth color transitions. They can be linear/axial along a line between two points or radial centered around a single point. 2. Axial gradients use linear interpolation between two specified colors along a line. Radial gradients use linear interpolation based on distance from the center color outwards. 3. Other gradient shapes are possible by combining multiple gradients, such as for polygons using their straight skeleton boundaries. Vector graphics can also use gradient meshes.

Uploaded by

Manuel Mensa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
238 views

Color Gradient: 1 Axial Gradients

1. Color gradients specify a range of position-dependent colors to fill a region, producing smooth color transitions. They can be linear/axial along a line between two points or radial centered around a single point. 2. Axial gradients use linear interpolation between two specified colors along a line. Radial gradients use linear interpolation based on distance from the center color outwards. 3. Other gradient shapes are possible by combining multiple gradients, such as for polygons using their straight skeleton boundaries. Vector graphics can also use gradient meshes.

Uploaded by

Manuel Mensa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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
www.22BulbJungle.com 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: https://en.wikipedia.org/wiki/Color_gradient?oldid=767140646 Contributors: Bearcat, Xezbeth, Jacobolus,
Rjwilmsi, NeonMerlin, JabberWok, Chris Chittleborough, Adam majewski, Tgdwyer, Ianmacm, Dicklyon, FleetCommand, Ibadibam,
Gaijin42, Magioladitis, David Eppstein, Motine, ClueBot, Subversive.sound, 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: https://upload.wikimedia.org/wikipedia/en/4/48/Folder_Hexagonal_Icon.svg License: Cc-by-
sa-3.0 Contributors: ? Original artist: ?
File:Gradient.svg Source: https://upload.wikimedia.org/wikipedia/commons/2/27/Gradient.svg License: CC-BY-SA-3.0 Contributors:
Own work Original artist: Thomas Steiner
File:Linear-gradient.svg Source: https://upload.wikimedia.org/wikipedia/commons/f/fa/Linear-gradient.svg License: CC BY-SA 3.0
Contributors: Own work Original artist: Chris Chittleborough
File:Portal-puzzle.svg Source: https://upload.wikimedia.org/wikipedia/en/f/fd/Portal-puzzle.svg License: Public domain Contributors: ?
Original artist: ?
File:Radial-gradient.svg Source: https://upload.wikimedia.org/wikipedia/commons/c/c9/Radial-gradient.svg License: CC BY-SA 3.0
Contributors: Own work Original artist: Chris Chittleborough
File:Synaptic.png Source: https://upload.wikimedia.org/wikipedia/commons/0/05/Synaptic.png License: GPL Contributors: [1] Original
artist: en:User:Burgundavia
File:Wikibooks-logo-en-noslogan.svg Source: https://upload.wikimedia.org/wikipedia/commons/d/df/Wikibooks-logo-en-noslogan.
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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy