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. The most basic type of gradient needs at least two colors. These are called color stops.
By default, linear gradients run from top to bottom, but their rotation can be changed 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, ...);
examples: linear gradients
<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.
examples: degrees (deg)
<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.
CSS gradients also support transparency, which can be used to create fading effects. To add transparency, the rgba() function can be used 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 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, 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.
To create a hard line between two colors, to create 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.
examples: colors
<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.
examples: stripes and bands
<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.
examples: stacked gradients
<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.
examples: radial gradients
<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.
examples: sizing radial gradients
<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.
examples: stacked radial gradients
<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.
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
syntax examples:
A conic gradient rotated 45 degrees, starting blue and finishing red: conic-gradient(from 45deg, blue, red);
A bluish purple box: the gradient goes from blue to red, but only the bottom right quadrant is visible, as the center of the conic gradient is at the top left corner: conic-gradient(from 90deg at 0 0, blue, red);
Colorwheel: background: conic-gradient(hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%));
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.
angle: preceded by the "from" keyterm, and taking an angle as its value, it defines the "gradient rotation" in "clockwise direction".
position: using the same length, order and keyterm values as the "background-position property", the position defines center of the gradient. If omitted, the default value is center, meaning the gradient will be centered.
angular-color-stop: a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis).
color-hint: the color-hint is an "interpolation hint" defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
conic-gradient(red 40grad, 80grad, blue 360grad);
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); background-size: 25% 25%;
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.
examples: conic gradients
<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.
The 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.
examples: repeating linear gradients
<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>
A 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.
examples: repeating radial gradients
<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>
The repeating-conic-gradient() function is used to create repeating conic gradients. These can have defined color-starts and color-stops.
A repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an <angle>. Units include "deg" for degrees, "grad" for gradients, "rad" for radians, and "turn" for turns.
Example conic gradients include pie charts and color wheels.
A conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element size. To create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead. Because "gradients" belong to the "image data type", they can only be used where "images can be used. For this reason, conic-gradient() won't work on background-color and other properties that use the "color data type".
examples: repeating conic gradients
<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>
code:
<div class="grid_B">
<div class="radial-gradient">radial-gradient</div><br>
<div class="conic-gradient">conic-gradient</div>
</div>
<style>
.radial-gradient {position: relative; background-image: radial-gradient(red, green, blue);
width:10vw; height: 10vw; border-radius:50%; padding:1vw; color: white; text-align: center; }
.conic-gradient {position: relative; background-image: conic-gradient(red, green, blue);
width:10vw; height: 10vw; border-radius:50%; padding: 1vw; color: white; text-align: center;}
</style>
code:
<div class="ex">
<div class="pie-chart"></div>
<div class="pie-chart-border"></div>
<div class="pie-chart-four-colors"></div>
</div>
<style>
.pie-chart {position: relative; width: 10vw; height: 10vw;border-radius:50%;
background-image: conic-gradient(#1a535c 40deg, #ff6b6b 40deg 160deg, #4ecdc4 160deg);
padding: 1vw; color: darkblue; margin: 1vw;}
.pie-chart-border {position: relative; width: 10vw; height: 10vw; border-radius:50%;
background-image: conic-gradient(#1a535c 1deg 60deg, #ff6b6b 60deg 120deg,
#4ecdc4 120deg 220deg, #ffe66d 220deg); padding: 1vw; color: darkblue; margin: 1vw;}
.pie-chart-border:before {content:""; position: absolute;background-color: #fff; width:10vw;
height:10vw; border-radius:50%; top:1vw; left:1vw;}
.pie-chart-four-colors {position: relative; width: 10vw; height: 10vw;border-radius:50%;
background-image: conic-gradient(#4ecdc4 25%, #1a535c 0 50%, #ffe66d 0 75%, #ff6b6b 0);
padding: 1vw; color: darkblue; margin: 1vw;}
</style>
code:
<div class="starburst"></div>
<style>
.starburst {position: relative; width:20vw; height: 20vw; margin-left: 4vw;
background: repeating-conic-gradient(#ffdd00 0 18deg, #ffc300 0 36deg);}
</style>
<div class="ex">
<div class="fourty">40 degrees</div>
<div class="fifty">50 degrees</div>
<div class="sixty">60 degrees</div>
<div class="ninety">90 degrees</div>
<div class="onethirty">130 degrees</div>
</div>
<style>
.grid_D{display: grid; grid-template-columns: repeat(5, 1fr); color: white;}
.fourty{width: 8vw; height: 8vw; background-image:conic-gradient(from 40deg, #fff, #000);margin-left: 1vw;}
.fifty{width: 8vw; height: 8vw; background-image:conic-gradient(from 50deg, #fff, #000);margin-left: 1vw;}
.sixty{width: 8vw; height: 8vw; background-image:conic-gradient(from 60deg, #fff, #000);margin-left: 1vw;}
.ninety{width: 8vw; height: 8vw; background-image:conic-gradient(from 90deg, #fff, #000);margin-left: 1vw;}
.onethirty{width: 8vw; height: 8vw; background-image:conic-gradient(from 130deg, #fff, #000);margin-left: 1vw;}
</style>
< div class="ex">
<div class="off-one">off 25%</div>
<div class="off-two">off 50%</div>
<div class="off-three">off 100%</div>
</div>
<style>
.off-one{width: 10vw; height: 10vw; background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); margin-left: 1vw;}
.off-two{width: 10vw; height: 10vw; background: conic-gradient(from 0deg at 0% 50%, blue, green, yellow 180deg); margin-left: 1vw;}
.off-three{width: 10vw; height: 10vw; background: conic-gradient(from 0deg at 0% 100%, blue, green, yellow 180deg); margin-left: 1vw;}
</style>
<div class="ex">
<div class="syntax-one">smooth</div>
<div class="syntax-two">hard stops</div>
<div class="syntax-three">from keyword</div>
<div class="syntax-four">at keyword</div>
<div class="syntax-five">repeating</div>
</div>
<style>
.grid_D{display: grid; grid-template-columns: repeat(5, 1fr); color: white;}
.syntax-one{width: 10vw; height: 10vw; background: conic-gradient(cyan, magenta, yellow, black);margin-left: 1vw;}
.syntax-two{width: 10vw; height: 10vw; background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0); margin-left: 1vw;}
.syntax-three{width: 10vw; height: 10vw; background: conic-gradient(from 45deg, cyan, magenta, yellow); margin-left: 1vw;}
.syntax-four{width: 10vw; height: 10vw; background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow); margin-left: 1vw;}
.syntax-five{width: 10vw; height: 10vw; background: repeating-conic-gradient(red 10%, #4AAE9B 20%); margin-left: 1vw;}
</style>
checkerboard
checkerboard
board
code:
<div class="ex grid_B">
<div class="board-one"><p>checkerboard</p></div>
<div class="board-two"><p>checkerboard</p></div>
<div class="board-three"><p>board</p></div>
</div>
<style>
.board-one{width: 16vw; height: 16vw; border:0.58vw solid #000; background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0); background-size: 4vw 4vw; margin-left: 1vw;}
.board-two{width: 16vw; height: 16vw; border:0.58vw solid #000; background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
border: 0.3vw solid;margin-left: 1vw;}
.board-three{width: 16vw; height: 16vw; border:0.58vw solid #000; background: conic-gradient(#fff 0.25turn, #bbb 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #bbb 0.75turn) top left / 10% 10% repeat;
outline: 1px solid;margin-left: 1vw;}
.grid_B p{margin-top: -2vw;}
</style>
code
<div id="trial">
<h4 id="second">gradient color generator</h4>
<b>current colors for gradient background:</b>
<input class="color1" type="color" value="#0000ff" />
<input class="color2" type="color" value="#add8e6" />
</div>
<script>
let css = document.querySelector("#second");
let color_1 = document.querySelector(".color1");
let color_2 = document.querySelector(".color2");
let div1 = document.querySelector("#trial");
function changeGradient() {
document.getElementById("trial").style.background = "linear-gradient(to right, " +
color_1.value + ", " + color_2.value + ")";
css.textContent = document.getElementById("trial").style.background + ";";
}
color_1.addEventListener("input", changeGradient);
color_2.addEventListener("input", changeGradient)
</script>
code:
<div id="test">
<h4 id="first">gradient color generator</h4>
<b>current colors for gradient background:</b>
<input class="color3" type="color" value="#0000ff" />
<input class="color4" type="color" value="#add8e6" />
</div>
<script>
let cssA = document.querySelector("#first");
let color_3 = document.querySelector(".color3");
let color_4 = document.querySelector(".color4");
let div = document.querySelector("#test");
function changeDivGradient() {
document.getElementById("test").style.background = "repeating-radial-gradient(at top, "
+ color_3.value + ", " + color_4.value + ")";
cssA.textContent = document.getElementById("test").style.background + ";";
}
color_3.addEventListener("input", changeDivGradient);
color_4.addEventListener("input", changeDivGradient);
</script>
code:
<canvas id="canvas"></canvas>
<script>
let canvas = document.getElementById("canvas");
if (canvas.getContext) {
let ctx = canvas.getContext("2d");
let gradient = ctx.createLinearGradient(10, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(15 / 96, 'orange');
gradient.addColorStop(30 / 96, 'yellow');
gradient.addColorStop(45 / 96, 'green');
gradient.addColorStop(60 / 96, 'blue');
gradient.addColorStop(75 / 96, 'indigo');
gradient.addColorStop(1, 'violet');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 75);
}
</script>