Scribd
Upload
10 views7 pages

Gradient

The document defines and compares the three types of CSS gradients: linear gradients, which transition between colors along a line; radial gradients, which are circular transitions centered around a point; and conic gradients, which rotate colors around a center. Linear gradients require defining a direction and two or more color stops, while radial gradients also specify two or more color stops with an optional shape, size, and position. Repeating radial gradients repeat the color transition pattern.

Uploaded by

Sandeep Kumar mehta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views7 pages

Gradient

The document defines and compares the three types of CSS gradients: linear gradients, which transition between colors along a line; radial gradients, which are circular transitions centered around a point; and conic gradients, which rotate colors around a center. Linear gradients require defining a direction and two or more color stops, while radial gradients also specify two or more color stops with an optional shape, size, and position. Repeating radial gradients repeat the color transition pattern.

Uploaded by

Sandeep Kumar mehta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Gradient

List of Content
1. Gradient
2. Linear gradient
3. Radial gradient
4. Conic gradient
Gradient
It lets you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

● Linear Gradients (goes down/up/left/right/diagonally)


● Radial Gradients (defined by their center)
● Conic Gradients (rotated around a center point)
Linear Gradient
● To create a linear gradient you must define at least two color stops. Color stops are
the colors you want to render smooth transitions among. You can also set a starting
point and a direction (or an angle) along with the gradient effect.

● Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Radial Gradient
● It is defined by its center.

● To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ...,


last-color);

● By default, shape is ellipse, size is farthest-corner, and position is center.


Repeating a radial-gradient
● The repeating-radial-gradient() function is used to repeat radial gradients
THANK YOU

You might also like