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

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
Explorer Edge Chrome Firefox Opera Safari
1012263.612.16.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3726412.17Yes

Last updated by CSSPortal on: 9th December 2019