TL;DR – CSS gradients refer to images that display a smooth transition between several colors. CSS offers three options: linear-gradient, radial-gradient, and conic-gradient.
Contents
- 1. Creating Linear Gradients
- 2. Manipulating Linear Gradients
- 2.1. Angle
- 2.2. Using Multiple Color Stops
- 2.3. Using Transparency in Transitions
- 2.4. Multiplying Linear Gradients
- 3. Creating Radial Gradients
- 4. Manipulating Radial Gradients
- 4.1. Size Keywords
- 4.2. Repeating Radial Gradients
- 5. Setting Conic Gradients
- 5.1. Creating Conic Gradients From Other Spots
- 5.2. Setting an Angle
- 6. CSS Gradient: Useful Tips
Creating Linear Gradients
CSS creates linear gradients with the linear-gradient()
function. The result of this function is an image showing a transition between multiple colors along a straight line.
An easy way of creating linear gradients in CSS is using the linear-gradient
function and indicating several color values in the parentheses:
background: linear-gradient(direction, color-stp1, color-stp2, ...);
Up/Down Transition (default)
In this example, a linear gradient in CSS starts at the top and transitions going down. CSS sets this direction automatically when there are no other directional keywords.
Left/Right Transition
In this example, a linear gradient starts from the left and goes to the right (as defined).
Diagonal Transition
The gradient can transition diagonally by defining both the vertical and horizontal directions. In this example, a linear gradient starts at the top left and goes to the bottom right:
Manipulating Linear Gradients
Angle
Besides naming keywords to set the direction of gradients, CSS can describe specific angles for the transition.
background: linear-gradient(angle, color-stp1, color-stp2);
This example defines that the linear gradient would have 180 degrees:
Using Multiple Color Stops
CSS accepts more than two color values for gradients.
This example has a linear gradient (default direction from top to bottom) with three color stops:
This example shows a linear gradient (from right to left) with multiple colors is shown:
#grad {
background: linear-gradient(to left, #ff5e7c, #c272d4, #718ced, #02aab0, #00cdac);
}
Using Transparency in Transitions
Transparency value creates an effect of a transparent, fading gradient in CSS.
RGBA() or HSLA() indicators add the opacity
value from 0 to 1 (1 indicating solid colors).
This example shows how you set transparent gradient in CSS:
#grad {
background: linear-gradient(to right, rgb(255, 94, 124, 0.5), rgb(194, 114, 212, 1));
}
Multiplying Linear Gradients
CSS gradients can repeat to create a pattern of stripes by using the repeating-linear-gradient()
property. As a result, CSS creates many small rectangles.
This example repeats the gradient pattern:
#grad {
background: repeating-linear-gradient(#718ced, #753a88 15%, #ff5e7c 25%);
}
Creating Radial Gradients
The CSS radial gradients create images that transition between multiple colors that radiate from a specific spot.
background: radial-gradient(shape size at position, start-color, ..., last-color);
Note: by default, the shape is an ellipse, the position is center and size is farthest-corner.
Evenly Spaced Color Stops (Default)
By default, the CSS radial gradient starts radiating from the center of elements and transitions to other colors towards the edges.
This example shows a transition that begins at the center:
Differently Spaced Color Stops
The percentage values (%) added to color indicators describe how much space each color should take.
This example shows a radial gradient that does not arrange colors equally:
Setting Shape
The shape parameter in radial gradients specifies what form should the CSS create. The value can be ellipse
or circle
. The ellipse is the default.
This example creates a radial gradient in a circle:
Theory is great, but we recommend digging deeper!
Manipulating Radial Gradients
Size Keywords
The size parameter specifies the gradient size. Here are the possible values:
closest-side
farthest-side
closest-corner
farthest-corner
Tip: decide on which value you need by placing it in this sentence — let the color fade from the center to the [insert the value].
In the example, we use two opposite values to illustrate the difference between closest-side
and farthest-side
:
#grad1 {
background: radial-gradient(closest-side at 65% 50%, #ff5e7c, #c272d4, #6bbae8);
}
#grad2 {
background: radial-gradient(farthest-side at 65% 50%, #ff5e7c, #c272d4, #6bbae8);
}
Repeating Radial Gradients
The repeating-radial-gradient
property lets you repeat the radial gradient in CSS to create spiral patterns.
#grad {
background: repeating-radial-gradient(#5b07ff, #ff008d 15%, #5d78f9 25%);
}
Setting Conic Gradients
The conic-gradient()
function creates a transition similarly to CSS radial-gradient()
. They both start the transition from the center, but conic gradients put color stops around the circle.
A basic example of a conic gradient in CSS looks like this:
#grad {
height: 300px;
width: 600px;
background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(#ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
background: -webkit-conic-gradient(#ff5e7c, #c272d4, #6bbae8); /* Safari */
}
Remember: the conic-gradient() function does not have the best browser support — it only works on Google Chrome, Opera, and Safari.
Creating Conic Gradients From Other Spots
If you specify percentages other than 50% and 50%, the transition begins at a different point:
#grad {
height: 300px;
width: 600px;
background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(at 30% 30%, #ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
background: -webkit-conic-gradient(at 30% 30%,#ff5e7c, #c272d4, #6bbae8); /* Safari */
}
Setting an Angle
If you need to begin the transition from a different angle, you can specify it like this:
#grad {
height: 300px;
width: 600px;
background: blue; /* In case a browser doesn't support gradients */
background: conic-gradient(from 60deg, #ff5e7c, #c272d4, #6bbae8); /* Standard syntax */
background: -webkit-conic-gradient(from 60deg,#ff5e7c, #c272d4, #6bbae8); /* Safari */
}
CSS Gradient: Useful Tips
- Make sure to include the
background-color
property as a fallback function in case gradients do not work in some browsers. - You can use CSS gradients anywhere you would normally add an image. Since browsers create gradients, they look better than raster images.