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. Here’s a sample for a gradient starting from the top left: background: linear gradient(to bottom right, red, yellow); using angles to specify the direction of the gradient. you can also use angles, to be more accurate in specifying the direction of the gradient: background: linear gradient(angle, colour stop1, colour stop2);.
Here are some awesome background gradient examples created using the background image css property that can enhance the ui of your website to the next level. 1. dusty grass. use the following css to create the above gradient: background image: linear gradient (120 deg, #d4fc79 0%, #96e6a1 100%); 2. This works by overlaying 2 gradients, the first is a top to bottom gradient with a height of the content. this contains the colors you want to cycle through. the other is a top left, to bottom right gradient from transparent to a solid color. this gradient is fixed to the viewport dimensions and pulled behind text, similar to the scroll indicator. There are three types of repeating gradients, all three of which are currently supported in the official specification and one that is in the current working draft. the syntax for each notation is the same as its related gradient type. for example, repeating linear gradient() follows the same syntax as linear gradient(). The linear gradient () function sets a linear gradient as the background image. to create a linear gradient you must define at least two color stops. color stops are the colors you want to render smooth transitions among. you can also set a starting point and a direction (or an angle) along with the gradient effect. example of linear gradient:.
Comments are closed.