revision:
The <gradient> datatype is a special type of <image> made of a progressive transition between two or more colors.
Three types of gradients:
linear : created with the linear-gradient() function,
radial : created with the radial-gradient() function,
conic :created with the conic-gradient() function.
Repeating gradients are created with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.
A linear gradient creates a band of colors that progress in a straight line. To create the most basic type of gradient, specify two colors. These are called color stops. You must have at least two, but you can have as many as you want.
By default, linear gradients run from top to bottom. You can change their rotation by specifying a direction: horizontal (e.g. from left to right), diagonal (e.g. from corner to corner), or using angles.
Syntax: background-image: linear-gradient(direction || angle, color-stop1, color-stop2, ...);
<div>
<div id="linear1">default</div><br>
<div id="linear2">horizontal</div><br>
<div id="linear3">diagonal</div><br>
<div id="linear4">using angles</div><br>
</div>
<style>
#linear1, #linear2, #linear3, #linear4{width:20vw; height: 5vw; border: 0.2vw solid blue; color: orangered;}
#linear1{background: linear-gradient(green, pink);}
#linear2{background: linear-gradient(to right, green, pink);}
#linear3{background: linear-gradient(to bottom right, green, pink);}
#linear4{background: linear-gradient(190deg, green, pink);}
</style>
When using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction.
<div>
<div id="linear1a">0 degrees</div><br>
<div id="linear2a">90 degrees</div><br>
<div id="linear3a">180 degrees</div><br>
<div id="linear4a">-90 degrees</div><br>
</div>
<style>
#linear1a, #linear2a, #linear3a, #linear4a{width:20vw; height: 5vw; border: 0.2vw solid blue; color: orangered;}
#linear1a{background: linear-gradient(0deg,green, pink);}
#linear2a{background: linear-gradient(90deg, green, pink);}
#linear3a{background: linear-gradient(180deg, green, pink);}
#linear4a{background: linear-gradient(-90deg, green, pink);}
</style>
Using more than two colors: by default, colors are evenly spaced along the gradient.
Using transparency : CSS gradients also support transparency, which can be used to create fading effects. To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
Color stops: color stops have default positions, but to fine-tune their locations, you can give each one zero, one, or two percentage or - for radial and linear gradients - absolute length values.
If you specify the location as a percentage, % represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.
If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at 100%, and any other color stops being half way between their adjacent color stops.
Creating hard lines: to create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location.
Gradient hints : by default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient.
<div>
<div id="linear1b">color stops</div><br>
<div id="linear2b">hard lines</div><br>
<div id="linear3b">color-hint</div><br>
<div id="linear4b">transparency</div><br>
</div>
<style>
#linear1b, #linear2b, #linear3b, #linear4b{width:20vw; height: 5vw; border: 0.2vw solid blue; color: black;}
#linear1b{background: linear-gradient(0deg, green 1%, pink 12%, blue 20%, red 50%, magenta 70%);}
#linear2b{background: linear-gradient(to bottom left, green 50%, pink 50%) }
#linear3b{background: linear-gradient(green, 10%, pink );}
#linear4b{background: linear-gradient(to right, rgba(255,0,0,0),rgba(255,0,0,0.5), rgba(255,0,0,1));}
</style>
Creating color bands and stripes : to include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.
<div>
<div id="linear1c">multiposition-stop</div><br>
<div id="linear2c">multiposition-stop</div><br>
<div id="linear3c">multiposition-stop</div><br>
<div id="linear4c">multiposition-stop</div><br>
</div>
<style>
#linear1c, #linear2c, #linear3c, #linear4c{width:20vw; height: 5vw; border: 0.2vw solid blue; color: black;}
#linear1c{background: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80%);}
#linear2c{background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%,yellow 80%); }
#linear3c{background: linear-gradient(to left, lime 25%, red 25%,red 50%, cyan 50%, cyan 75%, yellow 75%);}
#linear4c{background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%);}
</style>
Controlling the progression of a gradient : by default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to highlight the difference the color hint can make:
Overlaying gradients : gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.
Stacked gradients : gradients can be stacked with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.
<div>
<div id="linear1d">color-progression</div><br>
<div id="linear2d">color-progression</div><br>
<div id="linear3d">overlaying gradients</div><br>
<div id="linear4d">stacked gradients</div><br>
</div>
<style>
#linear1d, #linear2d, #linear3d, #linear4d{width:20vw; height: 5vw; border: 0.2vw solid blue; color: black;}
#linear1d{background: linear-gradient(to top, lime, 20%, red);}
#linear2d{background: linear-gradient(to top, lime, red); }
#linear3d{background: linear-gradient(to right, transparent, mistyrose), url("search.png");}
#linear4d{background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg,
rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),linear-gradient(336deg, rgba(0, 0, 255, 0.8),
rgba(0, 0, 255, 0) 70.71%);;}
</style>
Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is and also make them circular or elliptical.
Syntax : background-image: radial-gradient(shape size at position, start-color, ..., last-color);
All you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box.
Positioning radial color stops : each radial color stop can be positioned with a percentage or absolute length.
Positioning the center of the gradient : the center of the gradient can be positioned with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.
<div>
<div id="radial1">default</div><br>
<div id="radial2">color stops</div><br>
<div id="radial3">position center</div><br>
<div id="radial4">position center</div><br>
</div>
<style>
#radial1, #radial2, #radial3, #radial4{width:20vw; height: 5vw; border: 0.2vw solid blue; color: black;}
#radial1{background: radial-gradient(red, blue);}
#radial2{background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);}
#radial3{background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);}
#radial4{background: radial-gradient(at 90% 60%, red, blue, lightgreen);}
</style>
Sizing radial gradients : you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default. Circles can also be sized with a length, and ellipses a length or percentage.
<div>
<div id="radial1a">closest-side for ellipses</div><br>
<div id="radial2a">farthest-corner for ellipses</div><br>
<div id="radial3a">closest-side for circles</div><br>
<div id="radial4a">length or percentage for ellipses</div><br>
<div id="radial5a">length for circles</div><br>
</div>
<style>
#radial1a, #radial2a, #radial3a, #radial4a, #radial5a{width:20vw; height: 5vw; border: 0.2vw solid blue; color: black;}
#radial1a{background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige);}
#radial2a{background: radial-gradient(ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige);}
#radial3a{background: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%,#1e90ff 50%,beige);}
#radial4a{background: radial-gradient( ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige);}
#radial5a{background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);}
</style>
Stacked radial gradients : you can stack radial gradients. The first specified is on top, the last on the bottom.
<div>
<div id="radial1b">stacked radial gradients</div><br>
<div id="radial2b">stacked radial gradients</div><br>
<div id="radial3b">stacked radial gradients</div><br>
<div id="radial4b">stacked radial gradients</div><br>
</div>
<style>
#radial1b, #radial2b, #radial3b, #radial4b {width:10vw; height: 10vw; border: 0.2vw solid blue; color: black;}
#radial1b{background: radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige;
border-radius: 50%;}
#radial2b{background: radial-gradient(circle at 10% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige;
border-radius: 50%;}
#radial3b{background: radial-gradient(circle at 20% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige;
border-radius: 50%;}
#radial4b{background: radial-gradient(circle at 70% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige;
border-radius: 50%;}
</style>
The >conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
Example conic gradients include pie charts and color wheels, but they can also be used for creating checker boards and other interesting effects.
Syntax : background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, and the color-stops are percentages or degrees. Absolute lengths are not valid!!
With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise.
You can position the center of the gradient and you can change the gradient angle.
All you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:
Positioning the conic center : you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"
Changing the angle : by default, the different color stops you specify are spaced equidistantly around the circle. You can position the starting angle of the conic gradient using the "from" keyword at the beginning followed by an angle or a length, and you can specify different positions for the colors stops by including an angle or length after them.
<div>
<div id="conic1a">basic conic gradient</div><br>
<div id="conic2a">position the center</div><br>
<div id="conic3a">changing the angle</div><br>
<div id="conic4a">changing the angle</div><br>
<div id="conic5a">changing the angle</div><br>
</div>
<style>
#conic1a, #conic2a, #conic3a, #conic4a, #conic5a{width:15vw; height: 10vw; border: 0.2vw solid blue; color: black;}
#conic1a{background: conic-gradient(lightgreen, burlywood);}
#conic2a{background: conic-gradient(at 0% 30%, lightgreen 10%, burlywood 30%, #1e90ff 50%);}
#conic3a{background: conic-gradient(from 45deg, lightgreen, burlywood 50%, blue 85%, green);}
#conic4a{background: conic-gradient(from 95deg, lightgreen, burlywood 50%, blue 85%, green);}
#conic5a{background: conic-gradient(from 125deg, lightgreen, burlywood 50%, blue 85%, green);}
</style>
The linear-gradient(), radial-gradient(), and conic-gradient() functions don't support automatically repeated color stops.
However, the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions are available to offer this functionality.
The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value.
If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%.
If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner.
If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.
Repeating linear gradients: repeating-linear-gradient() is used to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats.
Multiple repeating linear gradients : you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image.
<div>
<div id="repeating1a">repeating linear gradient</div><br>
<div id="repeating2a">multiple repeating linear gradients</div><br>
<div id="repeating3a">plaid gradient</div><br>
<
</div>
<style>
#repeating1a, #repeating2a, #repeating3a {width:30vw; height: 20vw; border: 0.2vw solid blue; color: black;}
#repeating1a{background: repeating-linear-gradient(-45deg, lightgreen, burlywood 5px, skyblue 15px, orange 10px );}
#repeating2a{background: repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5) 80px,
rgba(255, 255,0, 0.5) 120px,rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, rgba(75, 0, 130, 0.5) 240px,
rgba(238, 130, 238, 0.5)280px, rgba(255, 0, 0, 0.5) 300px), repeating-linear-gradient(-190deg,
rgba(255, 0, 0, 0.5) 30px, rgba(255, 153, 0, 0.5) 0px, rgba(255, 255, 0, 0.5) 90px,rgba(0, 255, 0, 0.5) 120px,
rgba(0, 0, 255, 0.5) 150px, rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,rgba(255, 0, 0, 0.5) 230px),
repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green 200px, blue 250px, indigo 300px, violet
350px, red 370px);}
#repeating3a{background: repeating-gradient( 90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient( 0deg, transparent,transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(-45deg,transparent,
transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), repeating-linear-gradient(45deg,
transparent, transparent 5px, rgba(143,77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); background:
repeating-linear-gradient(90deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(0deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(-45deg, transparent 0 5px,rgba(143, 77, 63, 0.25) 5px 10px),
repeating-linear-gradient(45deg, transparent 0 5px, rgba( 143, 77, 63, 0.25) 5px 10px);}
</style>
Repeating radial gradients : repeating-radial-gradient() is used to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.
<div>
<div id="repeating1b">repeating radial gradient</div><br>
<div id="repeating2b">multiple repeating radial gradients</div><br>
</div>
<style>
#repeating1b, #repeating2b {width:30vw; height: 20vw; border: 0.2vw solid blue; color: red;}
#repeating1b{background: repeating-radial-gradient(black, black 5px, white 5px, white 10px );}
#repeating2b{ background: repeating-radial-gradient( ellipse at 80% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 15px,
rgba(255, 255, 255, 0.5) 15px, rgba(255, 255, 255, 0.5) 30px) top left no-repeat,
repeating-radial-gradient(ellipse at 20% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 10px,rgba(255, 255, 255, 0.5) 10px,
rgba(255, 255, 255, 0.5) 20px) top left no-repeat yellow; background-size: 20vw 20vw, 15vw 15vw;}
</style>
Repeating conic gradient : the repeating-conic-gradient() function is used to create repeating conic gradients. These can have defined color-starts and color-stops.
<div>
<div id="repeating1c">repeating conic gradient</div><br>
<div id="repeating2c">multiple repeating conic gradients</div><br>
</div>
<style>
#repeating1c, #repeating2c {width:30vw; height: 20vw; border: 0.2vw solid blue; color: black; border-radius: 50%;}
#repeating1c{background: repeating-conic-gradient(red 10%, yellow 20%, lightgreen 30%);}
#repeating2c{ background: repeating-conic-gradient( red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);}
</style>