mask-border-source - CSS: Cascading Style Sheets
r | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? ...
...> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? ...
...ctor> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{...
...And 7 more matches

repeating-linear-gradient() - CSS: Cascading Style Sheets
type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the length of the gradient that repeats is the distance between the first and last color stop. if the first color does not have a color-stop-length, the color-stop-length defaults to 0. with each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. this can be altered with repeating the first color again as the ...
... the side keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat. <color-hint> th color-hint is an interpolation hint defining how the gradient progres...
...fines 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. note: rendering of color stops in css gradients follows the same rules as color stops in svg gradients. ...
...And 4 more matches

linear-gradient() - CSS: Cascading Style Sheets
the side keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's 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 trans...
...ontainer, use the repeating-linear-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type. composition of a linear gradient a linear gradient is defined by an axis—the gradient line—and two or more color-stop points. each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line. the gradient line is defined by the center of the box containing the gradient image and by an angle. the colors of the gradient are dete...
...radient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line. the gradient line is defined by the center of the box containing the gradient image and by an angle. the colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points. the starting point is the location on the gradient line where the first color begins. the ending point is the point where the last color ends. each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. the ending point can be simply understood as the symmetrical point of the starting po...
...And 2 more matches

repeating-conic-gradient() - CSS: Cascading Style Sheets
100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, 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, meaing 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). the last color stop minus the first color-stop angle defines the size of the repeating gradient. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two c...
...-color and other properties that use the <color> data type. to create a conic gradient that doe not repeat, make the gradient a full 360 degree rotation, or use the conic-gradient() function instead. understanding repeating conic gradients the repeating-conic-gradient syntax is similar to the conic-gradient() and repeating-radial-gradient() syntax. like the non-repeating conic-gradient, the color-stops are placed around a gradient arc. like the repeating radial gradient, the size of the repeating section is the first color stop subtracted from the angle of the last color stop. the above gradients are defined as being one third blue, one third red, and one third yellow. repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); repeating-radial-gradient(red ...
...dient(red 33%, yellow 33% 66%, blue 66%); for a repeating gradient to repeat we define the first and last color stops. like in non-repeating gradients, the first and last color stops are assumed to be 0 and either 100% or 360deg if not explicitly declared. when defaulting to these values, the repeating arc is 360 degrees, and therefore doesn't repeat. like the non-repeating conic gradient, the color-stops are placed around a gradient arc -- the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. the colors transition as as if spun around the center of a circle, starting at the top if no from <angle> is declared, and going clockwise for the the size of the angle that is the different between the largest and smallest color angle, then repeating. a ...
...And 2 more matches

conic-gradient() - CSS: Cascading Style Sheets
), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, 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, meaing 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> th 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 ...
...sed where <image>s can be used. for this reason, conic-gradient() won't work on background-color and other properties that use the <color> data type. why is it called a "conic" gradient? if the color stops are much lighter on one side than the other, it can look like a cone from above. composition of a conic gradient 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, rather than on the gradient line emerging from the center of the gradient. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. a conic gradient is sp...
...e emerging from the center of the gradient. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. a conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. browsers supporting conic gradients also accept percent values, with 100% equalin...
... the values for the position are similar to the syntax for 2-value background-position. the gradient arc is the circumference of the gradient. the starting point of the gradient or arc is north, or 12:00pm. the gradient is then rotated by the from angle. the colors of the gradient are determined by the angled color stops, their starting points, ending points, and, in between, and optional angled color-stop points. the transitions between colors can be altered with color hints between adjacent colors' color stops. customizing gradients by adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. a color-stop's position can be explicitly defined by using an <angle>. if you don't specify the location of a color stop, it is placed...

repeating-radial-gradient() - CSS: Cascading Style Sheets
er the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. <color-stop> a color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. percentage values in between are linearly positioned on the virtual gradient ray. formal sy...
... between are linearly positioned on the virtual gradient ray. ...
...[at <position>]? , | at <position> , <color-stop-list> ) \---------------------------------------------------------------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
...--------------------------------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...

CSS data types - CSS: Cascading Style Sheets
define typical values (including keywords and units) accepted by css properties and functions. they are a special kind of component value type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...
...omponent value type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...
... type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...

radial-gradient() - CSS: Cascading Style Sheets
the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. <linear-color-stop> a color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. percentage values in between are linearly positioned on the gradient ray. includi...
...ainer, use the repeating-radial-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, radial-gradient() won't work on background-color and other properties that use the <color> data type. ...
...ies that use the <color> data type. composition of a radial gradient a radial gradient is defined by a center point, an ending shape, and two or more color-stop points. to create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). the ending shape may be either a circle or an ellipse. color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. each shape is a single color determined by the color on the gradient ray it intersects. examples simple gradient <div class="radial-gradient"></...

Using CSS gradients - CSS: Cascading Style Sheets
ient, and so on. in the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect. in both examples, the gradient is written twice: the first is the css images level 3 method of repeating the color for each stop and the second example is the css images level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration. 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 re...
...dients 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 intersting effects. 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, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. with conic gradients, the colors transition as as if spun around the cente...