A gradient is a progression from one color to the other. It can be used to create smooth looking graphics and is supported by pure CSS.
In this tutorial we cover how to gradient background in css and html. No need for images.
Choose an element
You can give a gradient to any element, so make sure you select your element well. Please take into account:
The gradients acts like an image
You can use a gradient for a bunch of applications, but make sure you pick the right element/pseudo element. If you want to use it for an overlay for example, use a ::before and give it an opacity.
Types of gradients
There are a number of gradient types:
- Linear gradient
- Radial gradient
- Repeating gradient (both linear and radial)
A linear gradient progresses from one side of an element to another in a linear fashion. Like a sunrise going from bright at the horizon to darker high in the sky.
A radial gradient starts from a point and radiates outward. Like the sun being bright in the center and getting less bright the farther you get from the center.
A repeating gradient does not progress from one point to the end of an element, but repeats. For example a radial repeating gradient might look like the ripples caused by dropping a pebble in apont.
You can specify a number of properties for your gradient:
- Color points
- Progress from red to orange to white
- Top to bottom
- Angle (instead of direction)
- 90deg (meaning 90 degrees)
- Using color in tgba with opacity, for example black with half opacity: rgba(255,255,255,0.5)
- Whether and how often to repeat the gradient
- Shape (radial)
- circle or ellipse
- Size (radial)
- 30% 20%
To make sure your gradients work well with all browsers, use these browser prefixes:
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
Linear gradient examples
Blue and white gradient from left to right:
background: linear-gradient(to right, blue, white);
Blue and white gradient from left top to right bottom:
background: linear-gradient(to right bottom, blue, white);
Blue and white gradient from left to right using degrees:
background: linear-gradient(90deg, blue, white);
Black square with transparency using gradient:
background: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
Repeating blue to white gradient from left to right 10 times:
background: repeating-linear-gradient(to left, blue, white 10%);
Gradient from red to white to blue from bottom to top:
background: repeating-linear-gradient(to top, blue, white, red);
Oh look, it’s a Dutch flag!
Radial gradient examples
Gradient from center, blue to white:
background: radial-gradient(blue, white);
Radial gradient with multiple colors from center to outside:
background: radial-gradient(blue, white, red);
Circular gradient in an element without a 1:1 ratio:
background: radial-gradient(circle, blue, white, red);
Gradient pulling the center vertically and squashing horizontally:
background: radial-gradient(40% 90%, blue, red);
Repeating circular gradient 10 times in dutch flag colors:
background: repeating-radial-gradient(blue, white, red 10%);