CSS <gradient> Data Type

Description

The CSS <gradient> data type is a special type of <image> that consists of a progressive transition between two or more colors. It is created using one of the following gradient functions:

• linear-gradient(): Creates a linear gradient, which transitions colors along a straight line.
• radial-gradient(): Creates a radial gradient, which transitions colors from a center point.
• conic-gradient(): Creates a conic gradient, which transitions colors around a circle.

<gradient> objects can be used anywhere <image> objects can be used, such as in backgrounds, borders, and text shadows. They can also be used as masks, which allows you to create effects such as transparent gradients and gradient overlays.

Here is an example of how to use the linear-gradient() function to create a simple linear gradient:

.gradient {
  background-image: linear-gradient(to right, blue, green, yellow);
}

This will create a gradient that transitions from blue to green to yellow from left to right. You can change the direction of the gradient by changing the to keyword to to top, to bottom, to left, or to bottom left. You can also add more color stops by separating them with commas.

Here is an example of how to use the radial-gradient() function to create a radial gradient:

.gradient {
  background-image: radial-gradient(circle at center, blue, green, yellow);
}

This will create a gradient that transitions from blue to green to yellow from the center of the element. You can change the shape of the gradient by changing the circle keyword to ellipse or rectangle. You can also change the position of the gradient by changing the at center keyword to at top, at bottom, at left, or at right.

<gradient> objects are a powerful way to add visual interest to your web pages. They can be used to create a wide variety of effects, from simple color transitions to complex patterns.

Using gradient objects in CSS

gradient objects can be used in any CSS property that accepts an image, such as:

• background-image
• border-image
• text-shadow
• mask-image

To use a gradient object in CSS, simply assign it to the property you want to use it with. For example, to use a linear gradient as the background of an element, you would use the following CSS:

.gradient {
  background-image: linear-gradient(to right, blue, green, yellow);
}

You can also use gradient objects in conjunction with other CSS properties to create more complex effects. For example, you could use a radial-gradient() object as a mask on an image to create a transparent gradient overlay.

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

The following table will show you the current browser support for the CSS gradient data type.

Desktop
12	26	3.6	12.1	7

Tablets / Mobile
26	4	12.1	7	1.5	37

Last updated by CSSPortal on: 7th October 2023