CSS <gradient> Data Type
Description
The <gradient>
CSS data type is a special type of <image> that consists of a progressive transition between two or more colors. These are commonly used for subtle shading in background images, buttons, and many other things.
Syntax
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
Values
- <linear-gradient()>Please go to linear-gradient() function to view values.
- <repeating-linear-gradient()>Please go to repeating-linear-gradient() function to view values.
- <radial-gradient()>Please go to radial-gradient() function to view values.
- <repeating-radial-gradient()>Please go to repeating-radial-gradient() function to view values.
Example
<p>Example of the gradient CSS data type</p>
body {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
Browser Support
Desktop | |||||
10 | 12 | 26 | 3.6 | 12.1 | 6.1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 26 | 4 | 12.1 | 7 | Yes |
Last updated by CSSPortal on: 9th December 2019