European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
AN APPROACH OF GRADIENT IN GRAPHICS: CSS3
Syeda Binish Zahra*, Talmeez Hussain
ABSTRACT: Css Gradient provides smooth display of combination of two colors. Css
Gradient use to display website more attractive and in uniform manner. In these days when
whole world is use to with HD picture quality, a web designer also face one of the big problem
to design website with proper color scheme and design patterns. With the help of Gradient we
can handle styling problem in designing website. This paper focuses at Css Gradient styles and
show how it works.
KEYWORDS: Gradient, Radial
INTRODUCTION
CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can
reduce download time and bandwidth usage. In addition, elements with gradients look better
when zoomed, because the gradient is generated by the browser.
In computer graphics, a color gradient (sometimes called a color ramp or color progression)
specifies a range of position-dependent colors, usually used to fill a region. For example,
many window managers allow the screen background to be specified as a gradient. The colors
produced by a gradient vary continuously with position, producing smooth color transitions.
RESEARCH METHODOLOGY, TOOLS & TECHNIQUES
The data is collected from internet and many books and also discuss with many designers. This
paper contains many answers about the problems of designing website.
Types of Gradients:
CSS3 defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
A) CSS3 Linear Gradients:
10
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
An axial color gradient (sometimes also called a linear color gradient) is specified by two
points, and a color at each point. The colors along the line through those points are calculated
using linear interpolation, and then extended perpendicular to that line.
To create a linear gradient you must define at least two color stops. Color stops are the colors
you want to render smooth transitions among. You can also set a starting point and a direction
(or an angle) along with the gradient effect.
Example of Linear Gradient:
Figure 1. Example of a Linear Gradient
Syntax
Background: linear-gradient (direction, color-stop1, color-stop2, ...);
Types of Linear Gradient
a. LINEAR GRADIENT:
1) Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red,
transitioning to blue:
Example
A linear gradient from top to bottom:
11
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
#grad
{
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
2) Linear Gradient - Left to Right
The following example shows a linear gradient that starts from the left. It starts red,
transitioning to blue:
Example
A linear gradient from left to right:
#grad
{
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
3) Linear Gradient – Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting
positions.
The following example shows a linear gradient that starts at top left (and goes to bottom
right). It starts red, transitioning to blue:
Example
12
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
A linear gradient that starts at top left (and goes to bottom right):
#grad
{
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
4) Linear Gradient – Using Angles
If you want more control over the direction of the gradient, you can define an angle, instead
of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).
Syntax
Background: linear-gradient (angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient line, going
counter-clockwise. In other words, 0deg creates a bottom to top gradient, while 90deg
generates a left to right gradient.
The following example shows how to use angles on linear gradients:
Example
A linear gradient with a specified angle:
#grad
{
background: -webkit-linear-gradient(180deg, red, blue);
background: -o-linear-gradient(180deg, red, blue);
background: -moz-linear-gradient(180deg, red, blue);
background: linear-gradient(180deg, red, blue);
}
13
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
b. RADIAL GRADIENTS:
Radial Gradients (defined by their center)
A radial gradient is specified as a circle that has one color at the edge and another at the
center. Colors are calculated by linear interpolation based on distance from the center.
Both CSS and SVG support radial gradients.
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops. You can also
specify the gradient's center, shape (circle or ellipse) as well as its size. By default,
center is center, shape is ellipse, and size is farthest-corner.
Example of Radial Gradient:
Figure 2. Example of a Radial Gradient
Syntax
Background: radial-gradient (center, shape size, start-color ...last-color);
Types of Radial Gradient:
1) Radial Gradient - Evenly Spaced Color Stops (this is default):
Example
A radial gradient with evenly spaced color stops:
#grad
{
14
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
}
2) Radial Gradient - Differently Spaced Color Stop:
Example
A radial gradient with differently spaced color stops:
#grad
{
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(red 5%, green 15%, blue 60%);
}
3) Set Shape
Example
A radial gradient with the shape of a circle:
#grad
{
background: -webkit-radial-gradient (circle, red, yellow, green);
background: -o-radial-gradient (circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
}
15
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
European Journal of Computer Science and Information Technology
Vol.2,No.3,pp.10-16, September 2014
Published by European Centre for Research Training and Development UK (www.eajournals.org)
CONCLUSION
The Computer Graphics is itself a sub filed of Computer Sciences, but it contains large branches
of graphics techniques. From last two decades scientists try to answer the questions like how
to handling images and how we get real and clear images. From Gradients we can candle
images more clearly. This paper discusses what is Css Gradient and its types with code which
clearly show the functionality and performance of gradient. Furthermore techniques of
gradients are introduced and presented in upcoming papers.
REFERENCES
Asente, Paul; Carr, Nathan (2013), "Creating contour gradients using 3D
bevels", Proceedings of the Symposium 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.
Eisenberg, J. David (2002). SVG Essentials. O'Reilly Media. p. 107. ISBN 0-596-00223-8.
16
ISSN 2054-0957 (Print), ISSN 2054-0965 (Online)
