CSS Gradients
Jakob Jenkov |
CSS 3 gives you the possibility to use gradients as background colors in HTML elements. Gradients are color transitions where an area changes color gradiently from one color to another. Gradients are often used to emulate the effect of light from above on colored surfaces.
CSS gradients come in two variants: Linear gradients and radial gradients. Linear gradients change color in a linear fashion. Radial gradients change color in a circular fashion. Both linear and radial gradients will be covered in this text.
Linear Gradients
Linear gradients colors an area or text in a linear fashion meaning the color changes linearly from one color to another. Here is a visual CSS linear gradient example:
Here is the code that created this gradient:
<style>
#gradient1 {
background-image: linear-gradient(180deg, #666666, #000000);
height: 100px;
}
</style>
<div id="gradient1"></div>
The example uses the CSS function linear-gradient() as value for the background-image
CSS property. This makes the browser color the background of the HTML element with linear gradient.
The linear-gradient() function takes three parameters. The first parameter is the angle of
the gradient. In the example above I used 180deg which means 180 degrees. The second and
third parameters are the "from" and "to" colors. In the example above the gradient changes from the color
#666666 (a darker gray) to #000000 (black).
Here is an example that changes from green to blue using an angle of 45 degrees:
Color Stops
The color parameters in the linear-gradient() function are called "color stops". A color stop
consists of a color and a location in percentage where the color is fully applied. Take a look at this
linear gradient example:
<style>
#gradient3 {
background-image: linear-gradient(180deg, #00ff00 20%, #0000ff 80%);
height: 100px;
}
</style>
<div id="gradient3"></div>
Notice how the two colors now have a percentage after them (20% and 80%). This means
that the gradient starts 20% into the area with the green color, and ends 80% into the area with the blue color.
Here is how that linear gradient looks when applied to an HTML element:
Notice how the area before the gradient starts is colored with the first color, and the area after the gradient ends is colored with the second color.
You can use more than two color stops. Here is a linear gradient example that uses 3 color stops:
<style>
#gradient4 {
background-image: linear-gradient(45deg, #00ff00 20%, #ff0000 50%, #0000ff 80%);
height: 100px;
}
</style>
<div id="gradient4"></div>
This example has a red color in the middle of the gradient (at 50%).
Here is what the linear gradient looks like when applied to an HTML element:
Radial Gradients
Radial gradients extend their color change from a center point and out in a circular or elliptic fashion. Here is a visual example:
Radial gradients are defined using the radial-gradient() CSS function. Here is the code that
generated the example above:
<style>
#gradient5 {
background-image: radial-gradient(ellipse farthest-corner at 50% 50% , #00FFFF 0%, #0000FF 95%);
height: 100px;
}
</style>
<div id="gradient5"></div>
Radial Gradient Syntax
The radial-gradient() function follows this syntax:
radial-gradient(
shape
[length | percentage] [| extent-keyword]
[at position]
,color stop
,color stop
[,color stop]
);
The shape parameter can take the value of either circle or ellipse. This
specifies whether the shape of the radial gradient should be circular or elliptical.
The length parameter sets the radius of the radial gradient for circular gradients. For elliptical
gradients you need to specify 2 length parameters. One for the radius of the gradient in the X and Y direction.
For elliptical gradients you can also use percentages as lengths instead of px, em etc.
The at position specifies the center of the gradient. If these parameters are not specified the
position will be assumed to be at the center of the HTML element. The keyword at is written
as text and the position is written as two coordinates. For instance at 200px 50px. This
means "at the point x=200,y=50".
Instead of the length parameter you can use an extent-keyword to tell the size of
the radial gradient. The possible extent-keyword values are:
closest-sidecloset-cornerfarthest-sidefarthest-corner
These keywords make the radial gradient extend horizontally and vertically from the center (position) of the gradient to either the closest side, closest corner, farthest side or farthest corner of the HTML element the gradient is applied to.
The color stop parameters consists of 2 or more color stop definitions, separated by comma. Again, a color stop definition consists of a color value and a percentage telling how far into the gradient this color is positioned. By "positioned" I mean where the gradient has this color - either by starting from this color or ending in this color.
Here are some examples that show you how the syntax looks in reality, as well as how the corresponding radial gradient looks when rendered.
<style>
#gradient6 {
background-image: radial-gradient(circle, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient6"></div>
<style>
#gradient7 {
background-image: radial-gradient(circle 100px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient7"></div>
<style>
#gradient8 {
background-image: radial-gradient(circle 100px at 200px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient8"></div>
<style>
#gradient9 {
background-image: radial-gradient(circle closest-side at 200px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient9"></div>
<style>
#gradient10 {
background-image: radial-gradient(circle closest-corner at 200px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient10"></div>
<style>
#gradient11 {
background-image: radial-gradient(ellipse, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient11"></div>
<style>
#gradient12 {
background-image: radial-gradient(ellipse 100px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient12"></div>
<style>
#gradient13 {
background-image: radial-gradient(ellipse 100px 50px at 200px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient13"></div>
<style>
#gradient14 {
background-image: radial-gradient(ellipse farthest-side at 200px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient14"></div>
<style>
#gradient15 {
background-image: radial-gradient(ellipse farthest-corner at 200px 50px, #FF0000 0%, #0000FF 100%);
height: 100px;
}
</style>
<div id="gradient15"></div>
CSS Gradients vs. SVG Gradients
CSS gradients are not the only option you have for coloring an area or shape with a gradient. SVG also has gradient features built in, and they are quite powerful. You can read about SVG gradients in my SVG gradients tutorial.
To use an SVG gradient as background for an HTML element you can use an SVG image as background image for an HTML element and create a rectangle with a gradient inside the SVG image. Then scale the background image to fill the HTML element. See CSS background images for more information.
| Tweet | |
Jakob Jenkov | |
