How to work with gradients in CSS3
How to work with gradients in CSS3
CSS3 gradients are used to display smooth transitions between two or more colors. Images were used earlier to display effects, but now in CSS3 we can use gradients. Gradients save bandwidth and load time. In a previous tutorial you learned about CSS3 Pseudo classes. In this tutorial we are going to learn how to work with gradients in CSS3. Gradients can be used with background property. All modern browsers support gradients.
CSS3 provide two types of gradients.
-
Linear Gradient
-
Radial Gradient
Linear Gradients in CSS3
To create a linear gradient, you have to define at least two color stops. Color stops are the colors that we want to transition.
Syntax of Linear Gradient
background: linear-gradient(direction, color-stop1, color-stop2, ...);
We define a direction and color stops with comma separated values.
Linear Gradient – Top to bottom
Consider the HTML page below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
height: 200px;
width: 200px;
}
.gradient {
background: linear-gradient(red, yellow); /* Standard syntax */
}
</style>
</head>
<body>
<div class = "gradient"></div>
</body>
</html>
You can also provide direction of gradient, by default it is top to bottom.
.gradient {
background: linear-gradient(red, yellow); /* Standard syntax */
}
Linear Gradient – Left to Right
Gradients can be from left to right, so we use to right.
background: linear-gradient(to right,red, yellow); /* Standard syntax */
Using Angles in linear gradients in CSS3
Angles can also be used in a linear gradient. Instead of using directions like to bottom, to top, to right, to left, to bottom right. Consider the code below.
background: linear-gradient(angle, color-stop1, color-stop2);
background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
This code generates a linear gradient in -90 degree angle.
Linear Gradient with multiple color stops
Multiple colors can be added as color stops in a linear-gradient. Below is a linear gradient from left to right with multiple color specified.
background: linear-gradient(to right, red, green, blue, yellow, magenta, black); /* Standard syntax */
Transparent Linear Gradient
To add transparency to a gradient we can use rgba function for color stops and provide a value for transparency. Transparency value can be from 0 to 1.
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
Above is a left to right gradient with rgba colors and transparency as well.
Repeating Linear Gradients in CSS3
To repeat linear gradient, repeating linear gradient can also be used.
background: repeating-linear-gradient(red, blue 20%, green 30%, yellow 10%);
Redial gradients in CSS3
Radial gradients are defined by their center. A radial gradient have two color stops at least.
background: radial-gradient(shape size at position, start-color, ..., last-color);
By default, ellipse is used as a shape in a radial gradient, farthest-corner is the size, and center is position of a radial gradient.
By default all colors will be evenly spaced but you can give different color spaces as well.
background: radial-gradient(red 5%, yellow 15%, green 60%);
Shapes in radial gradient
By default a radial gradient has a shape ellipse, but it can be circle or ellipse.
background: radial-gradient(circle, red, yellow, green);
We can use different sizes for radial gradient. you can use closest-side, farthest-side, closest-corner or farthest-corner.
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
Repeating radial gradients in CSS3
To repeat a radial gradient you can use repeating-radial-gradient().
background: repeating-radial-gradient(red, yellow 10%, green 15%);
You can see the repeating linear gradient above with red, yellow and green color stops.
Summary
In this tutorial we learned about gradients in CSS3 and two types of gradients one is linear gradients and radial gradients. you can learn more about gradients from Mozilla Developer Network.
Please leave your feedback and comments below. Follow us on Twitter and follow us on Facebook to get notified about upcoming tutorials.
About Author
maz
Maz is a software engineer, and a Zend Certified Engineer . His area of expertise contains PHP /Mysql, Node JS / MongoDB, Angular JS, IOS and android.
