Linear Gradient in CSSWhat is Gradient?The term "CSS gradient" describes a Cascading Style Sheets (CSS) method that enables seamless transitions between two or more colors. It enables you to add a gradient effect to different CSS properties, including text, borders, and backgrounds. With CSS gradients, you can specify a gradual blending of colors in either a circular or elliptical shape (radial-gradient) or across a specific direction. The gradient is defined by defining at least two color stops or the hues that will be mixed together. For Example: An illustration of a linear gradient that changes from blue to green is shown below: The 'to right' keyword is used in this example's use of the linear-gradient() function to specify the gradient's direction. "Blue" and "Green" are the gradient's beginning and ending colors. Additionally, you can specify more color stops to produce more intricate gradients. Illustration:An illustration of a radial gradient with three color stops is as follows: In this instance, a circular gradient is made using the radial-gradient() function. The color "red," "yellow," and "green" stand in for the color stops, while the keyword "circle" specifies the shape. You can create various visual effects and transitions by adjusting CSS gradients' direction, shape, and color stops. They are a potent tool for creating aesthetically pleasing websites because contemporary web browsers widely support them. What is Linear Gradient?In CSS, a linear gradient produces a seamless change in color along a single axis. Here is a program example and the syntax for a linear gradient: The following syntax:
Example:This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient() function. The gradient shifts from red (#ff0000) on the left to green (#00ff00) on the right. Output: Example 2:Here's an example of an HTML program that uses a top-to-bottom linear gradient as the background: This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient() function. The gradient transitions from red (#ff0000) at the top to green (#00ff00) at the bottom, as indicated by the bottom keyword. Output: ExampleHere's an example of an HTML program that uses a right-to-left linear gradient as the background: This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient() function. The gradient starts red (#ff0000) on the right and transitions to green (#00ff00) on the left, according to the left keyword. Output: Advantages of Linear Gradient in CSSHere are the following advantages of the Linear gradient in CSS, such as:
Disadvantages of Linear Gradient in CSSHere are the following disadvantages of the Linear gradient in CSS:
Next TopicCSS Properties
|