For those who didn't know, CSS gradients are actually images. But these images are created by the browser the moment it sees a gradient color declared. The thing with these images is that they are created on the fly and do not cause any HTTP requests.
CSS gradients are so powerful that we can not only create gradients in any direction and various shapes, but we can also create amazing patterns.
With this being said, Lea Verou has an amazing library of CSS patterns created with gradients everyone reading this book should bookmark. Check it out here: http://tiny.cc/leave-verou-css3-patterns
Let's see how to create gradients in CSS.
The
linear-gradient() CSS function creates a gradient that transitions from one color to another in a line. It looks like this in its simplest form:
background-image: linear-gradient(red, blue);
We can create linear gradients that obey practically any direction called the gradient line: left to right, right to left, top to bottom, bottom to top, diagonal, and at any degree in a 360º radius.
If no direction for the gradient line is specified, the default value is from top to bottom.
Any amount of colors can be declared in the gradient line. Technically speaking, there's no limit, but from a design standpoint we should always try to keep it simple. At least two color values are required.
The linear-gradient() function supports all color modes: HEX, RGB, RGBa, HSL, HSLa, and color name.
We can also declare the direction of the gradient line via an angle value or four keyword values: to top, to bottom, to left, and to right.
to top: The gradient will start at the bottom and end at the topto bottom: The gradient will start at the top and end at the bottomto left: The gradient will start at the right and end at the leftto right: The gradient will start at the left and end at the right
The angle value is defined at the beginning of the declaration and can range from 0 to 360. Larger values wrap around the circumference.
We can also define where a color stops in the gradient. A color stop is a combination of a color value followed by a stop position, which is optional.
Stop positions can be declared in any length value or a percentage value and go after the color value.
Color stops are very flexible because they allow us to make solid transitions between colors. This is great for making patterns or other types of graphics that require solid color transitions, like country flags.
When the stop positions aren't declared, the browser distributes the gradient colors evenly along the gradient line.
CSS:
/*Basic gradient. Colors are distributed evenly along the gradient line*/
.element { background-image: linear-gradient(red, blue); }
/*Gradient goes from right to left and starts with color red*/
.element { background-image: linear-gradient(to left, red, blue); }
/*Gradient line is diagonal; inclined 170 degrees*/
.element { background-image: linear-gradient(170deg, red, blue); }
/*Gradient with stop positions in percentages*/
.element { background-image: linear-gradient(red 50%, blue 75%); }
/*Gradient with stop positions in pixels*/
.element { background-image: linear-gradient(red 100px, blue 150px); }
/*Colombian flag (yellow, blue and red bands) made with solid color transitions using stop positions*/
.element { background-image: linear-gradient(#fcd116 50%, #003893 50%, #003893 75%, #ce1126 75%); }The
radial-gradient() CSS function creates a gradient that transitions from one color to another but in circular or elliptical form, and it looks like this in its simplest form:
background-image: radial-gradient(orange, green);
There are three parts to a radial gradient: its center, its ending shape, and color stops.
The center defines the location in the element from which the radial gradient will start; a radial gradient doesn't have to start at the center of an element. The ending shape defines if the radial gradient is going to be a circle or an ellipse. The ellipse shape is the default shape if the circle keyword isn't declared. The color stops are the colors that make the gradient and, if declared, any stop positions which are optional. Remember that stop positions can be declared in any length value or a percentage value and go after the color value.
At least two colors are required to make a radial gradient, or any gradient for that matter.
We can define where the center of the radial gradient is located within the element. As I mentioned before, the default position is at the center of the element.
To declare a specific position we use the keyword at and define the X and Y axes coordinates. This value should go before any color value is declared but after the ending shape.
The X and Y axes coordinates can be declared in any length value, a percentage value or any of the keyword values, top, right, bottom, and left. This is pretty much the same way we declare the background-position on an element.
The position requires an ending shape to be declared, either circle or ellipse; otherwise, the declaration is invalid.
We can also change the size of the radial gradient. The size of the gradient is declared before the position but it can go before or after the ending shape. It can take one or two values for width and height. If one value is declared it will be used for both.
The size can be defined with a length value, a percentage value, or one of four keyword values: closest-corner, farthest-corner, closest-side, and farthest-side.
closest-corner: The size of the gradient depends on the corner that is closest to the center.farthest-corner: The size of the gradient depends on the corner that is farthest from the center.closest-side: The size of the gradient depends on the side that is closest to the center.farthest-side: The size of the gradient depends on the side that is farthest from the center.
CSS:
/*Basic gradient. Colors are distributed evenly in the ellipse*/
.element { background-image: radial-gradient(red, blue); }
/*Ending shape declared as circle*/
.element { background-image: radial-gradient(circle, red, blue); }
/*Position declared (only one value). Gradient will start at the left and center*/
.element { background-image: radial-gradient(circle at left, red, blue); }
/*Position declared (two values)*/
.element { background-image: radial-gradient(circle at left top, red, blue); }
/*Position declared with percentages. An ending shape value is required*/
.element { background-image: radial-gradient(circle at 25% 75%, red, blue); }
/*Size of the gradient declared in pixels*/
.element { background-image: radial-gradient(100px 50px ellipse at 25% 75%, red, blue); }
/*Size of the gradient relative to the farthest side of the element. Ending shape can be after or before size*/
.element { background-image: radial-gradient(circle farthest-side at 25% 75%, red, blue); }The
repeating-linear-gradient() CSS function is used to repeat a gradient image, and it looks like this:
background-image: repeating-linear-gradient(orange 50px, green 75px);
The repeating-linear-gradient() function uses the same syntax and values as the linear-gradient() CSS function, so please refer to that function for a detailed explanation of all the available values.
In order for the repeating-linear-gradient() function to work, we need to define stop positions on the colors. Otherwise, the repeated gradient will look as if we're just using linear-gradient().
CSS:
/*Basic repeating linear gradient*/
.element { background-image: repeating-linear-gradient(orange 50px, green 75px); }
/*Repeating gradient goes from right to left and starts with color orange*/
.element { background-image: repeating-linear-gradient(to left, orange 50px, green 75px); }
/*Repeating gradient line is diagonal; inclined 170 degrees*/
.element { background-image: repeating-linear-gradient(170deg, orange 50px, green 75px); }
/*Repeating gradient with stop positions in percentages*/
.element { background-image: repeating-linear-gradient(orange 25%, green 50%); }The
repeating-radial-gradient() CSS function is used to repeat a gradient image, and it looks like this:
background-image: repeating-radial-gradient(navy 50px, gray 75px);
The repeating-radial-gradient() function uses the same syntax and values as the radial-gradient() CSS function, so please refer to that function for a detailed explanation of all the available values.
In order for the repeating-radial-gradient() function to work, we need to define stop positions on the colors. Otherwise, the repeated gradient will look as if we're just using radial-gradient().
CSS:
/*Basic repeating linear gradient*/
.element { background-image: repeating-radial-gradient(navy 50px, gray 75px); }
/*Ending shape declared as circle*/
.element { background-image: repeating-radial-gradient(circle, navy 50px, gray 75px); }
/*Position declared (only one value). Gradient will start at the left and center*/
.element { background-image: repeating-radial-gradient(circle at left, navy 50px, gray 75px); }
/*Position declared (two values)*/
.element { background-image: repeating-radial-gradient(circle at left top, navy 50px, gray 75px); }
/*Position declared with percentages. Defaults to ellipse shape unless 'circle' is specified*/
.element { background-image: repeating-radial-gradient(at 25% 75%, navy 50px, gray 75px); }
/*Size of the gradient declared in pixels*/
.element { background-image: repeating-radial-gradient(200px 25px at 25% 75%, navy 50px, gray 75px); }
/*Size of the gradient relative to the farthest side of the element. Ending shape can be after or before size*/
.element { background-image: repeating-radial-gradient(circle farthest-side at 25% 75%, navy 50px, gray 75px); }