Scribd
Upload
43 views

CSS Part 5

CSS gradients allow for smooth color transitions between two or more specified colors. There are two types of gradients in CSS: linear gradients, which transition colors in a line, and radial gradients, which transition colors outward from a center point. Linear gradients require at least two color stops and can be defined with a direction or angle. Radial gradients are defined by their center.

Uploaded by

Mariam mari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
43 views

CSS Part 5

CSS gradients allow for smooth color transitions between two or more specified colors. There are two types of gradients in CSS: linear gradients, which transition colors in a line, and radial gradients, which transition colors outward from a center point. Linear gradients require at least two color stops and can be defined with a direction or angle. Radial gradients are defined by their center.

Uploaded by

Mariam mari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified
colors
CSS defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
IE9 and earlier versions do not support gradients

85 Roi Yehoshua, 2018


Eliahu Khalastchi
Linear Gradients
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: linear-gradient(direction, color-stop1, color-stop2, ...);

86 Roi Yehoshua, 2018


Eliahu Khalastchi
Linear Gradients
Top to bottom (default)
#grad1 {
background: linear-gradient(blue, lightblue);
}

Left to right
#grad2 {
background: linear-gradient(to right, blue,
lightblue);
}

Diagonal
#grad3 {
background: linear-gradient(to bottom right,
blue, lightblue);
}

87 Roi Yehoshua, 2018


Eliahu Khalastchi
Using Angles
If you want more control over the direction of the gradient, you can define an angle,
instead of the predefined directions
Syntax:
background: linear-gradient(angle, color-stop1, color-stop2);

The angle is specified as an angle between a horizontal line and the gradient line
#grad4 {
background: linear-gradient(30deg, yellow, red);
}

88 Roi Yehoshua, 2018


Eliahu Khalastchi
Using Transparency
CSS gradients also support transparency, which can be used to create fading effect.
To add transparency, we use the rgba() function to define the color stops
The following example shows a linear gradient that starts from the left fully
transparent, transitioning to full color red:
#grad5 {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

89 Roi Yehoshua, 2018


Eliahu Khalastchi
Using Multiple Color Stops
The following example shows how to create a linear gradient (from left to right) with
the color of the rainbow and some text:
#grad6 {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
text-align: center;
color: #888888;
font-size: 40px;
font-weight: bold
}

<div id="grad6">
Gradient Background
</div>

90 Roi Yehoshua, 2018


Eliahu Khalastchi
Radial Gradients
A radial gradient is defined by its center
Syntax:
background: radial-gradient(shape size at position, start-color, ..., last-color);

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


The following example shows a radial gradient with evenly spaced color stops:
#grad1 {
background: radial-gradient(red, yellow, green);
}

91 Roi Yehoshua, 2018


Eliahu Khalastchi
Radial Gradients - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color stops:
#grad2 {
background: radial-gradient(red 5%, yellow 15%, green 60%);
}

92 Roi Yehoshua, 2018


Eliahu Khalastchi
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse.
The default value is ellipse
The following example shows a radial gradient with the shape of a circle:
#grad3 {
background: radial-gradient(circle, red, yellow, green);
}

93 Roi Yehoshua, 2018


Eliahu Khalastchi

You might also like