![]() General values from the background-position property apply. ![]() rgba and transparent values for all color information are possible.īackground: radial-gradient(1 60px 45px, 2 circle 3 closest-side, 4 red, 5 blue 6 60%, 7 green) For tiled gradients see repeating-radial-gradient. By default gradients fill the whole background. Multiple gradients can be assigned comma separated. Radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+ webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+ The end color of magenta is moved to 80% on the gradient axis (instead of 100%).įor more info see the W3C site (new syntax), the Safari site and the site at MDN (including compatibility info for older browser versions). The starting color of black is moved to 20% on the gradient axis (instead of 0%). The gradient has an angle of 105 degrees. The color is yellow at 70% on the gradient axis (instead of 66%).īackground: linear-gradient(1 105deg, 2 black 20%, 3 magenta 80%) The color is green at 20% on the gradient axis (instead of 33%, which would be its natural position). The gradient starts at the top right corner and runs to the bottom left. Can also be extended by a stop position (like at 4).ĭiagonal gradient with multiple color stopsīackground: linear-gradient(1 225deg, 2 red, 3 green 20%, 4 yellow 70%, 5 black) The ending color (the last color stop).In this case blue is set to be at 30% instead of 50% (which would be the natural behavior). Defines the position of the color stop on the gradient axis. Multiple color stops (perhaps enhanced by a stop position like at 4) are possible, separated by commas. In this case the gradient doesnt simply transition from red (2) to green (5) but is enhanced by a color stop of blue in the middle. Can also be enhanced by a stop position to move its position on the gradient axis (like at 4). The starting color (the first color stop).Can also be an angle where 0deg points to the right, 90deg points up and -45deg runs from the top left corner to bottom right. In this case left defines a gradient running from the left to the right, left top would be a diagonal gradient running from the top left corner to the bottom right. The starting point of the gradient defining a straight line on which the gradient runs to the ending point. rgba and transparent values for all color information are possible.īackground: linear-gradient(1 left, 2 red, 3 blue 4 30%, 5 green) ![]() For tiled gradients see repeating-linear-gradient. ![]() IOS 5+Android 4+Blackberry 10+IE Mobile 10+ General description Rececently there was a change to a slightly different syntax, but you can still safely use the syntax described here.įirefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+ Not supported by Internet Explorer prior to version 10 and Opera Mini. Linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+ webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+ Currently only gradients as background images (through the background property) are supported. Gradients are smooth transitions from one color to another.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |