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