Here is the third example again, but now for a radial gradient. You can also give the element a regular background-color that will be used in the opacity.īackground: -webkit-radial-gradient(bottom right,red,yellow 30%,green 60%) īackground: radial-gradient(at bottom right,red,yellow 30%,green 60%) We’re back to two color-stops here, since we want a smooth transition throughout the element.īackground: #000000 -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0)) īackground: #000000 linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0)) This one uses the same red everywhere, but varies its opacity. You can use any color syntax you like, and also opacity. Now the gradient doesn’t fit into the initial box any more, but that’s OK.īackground: -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0)) īackground: linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0)) You can also use length units such as px. This means the gradient will reach green at 60%, and will fill up the remaining 40% with pure green.īackground: -webkit-linear-gradient(bottom right,red,yellow 100px,green 200px) īackground: linear-gradient(to top left,red,yellow 100px,green 200px) Red and green have no explicit stop, so they’re still assumed to be 0% and 100%.īackground: -webkit-linear-gradient(bottom right,red,yellow 30%,green 60%) īackground: linear-gradient(to top left,red,yellow 30%,green 60%) This means the gradient will reach yellow at 30% of the length of the gradient. In this case, the red is at the start (0%), the yellow in the middle (50%), and the green at the end (100%).īackground: -webkit-linear-gradient(bottom right,red,yellow 30%,green) īackground: linear-gradient(to top left,red,yellow 30%,green) Without any further instructions the colours are equally divided. Once you understand how regular color-stops work you can continue to repeating gradients.īackground: -webkit-linear-gradient(bottom right,red,yellow,green) īackground: linear-gradient(to top left,red,yellow,green) They work the same for linear and radial gradients.
By default they’re spaced equally, but you can overrule that by giving specific color-stops, such as 20% or 40px.Ĭolors and stops are the same in middle and new syntax. The example below creates a radial gradient starting from grey at 0%, to yellow at 20% to green at 60% and then finally white at 80% till 100%.Colors and stops tell the browser which colors to use in the gradients, and where they should stop. We set the position in percentage where 0% is the center of your gradient and 100% is the edge. Position: This defines the color stops, i.e., a certain color appears till which position.Some possible keywords that could be passed here are farthest-corner/side or closest-corner/side. Size:The value passed in this parameter sets the size of your gradient.Shape: This parameter defines the shape of your gradient, it could be an ellipse or a circle.These are all the parameters that you need to pass in a radial-gradient() method: Syntax radial-gradient(shape size, color1 position, color2 position.
Here, we can also specify the shape of the gradient. The parameters that we pass in the radial-gradient() method are almost the same with one addition though. In a radial gradient, the color transitions from the center towards the edge of the pages.
0 kommentar(er)
