YouTip

# CSS linear-gradient() Function The `linear-gradient()` function in CSS is used to create an image representing a linear transition of colors. It allows you to blend two or more colors smoothly along a straight line (the gradient line). Because gradients are dynamically generated by the browser, they scale perfectly without pixelation and perform better than traditional image files. --- ## Definition and Usage To create a linear gradient, you must define at least two color stops. You can also specify the direction (or angle) of the gradient. If no direction is specified, the gradient defaults to transitioning from top to bottom. ### Quick Syntax Examples ```css /* From top to bottom: transitions from blue to red */ linear-gradient(blue, red); /* At a 45-degree angle: transitions from blue to red */ linear-gradient(45deg, blue, red); /* From bottom-right to top-left: transitions from blue to red */ linear-gradient(to left top, blue, red); /* From bottom to top: starts with blue, transitions to green at 40% height, and ends with red */ linear-gradient(0deg, blue, green 40%, red); ``` --- ## Browser Support The numbers in the table below indicate the first browser version that fully supports this function. Numbers followed by `-webkit-`, `-moz-`, or `-o-` specify the first version that supported the function using vendor prefixes. | Function | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **linear-gradient()** | 26.0
10.0 `-webkit-` | 10.0 | 16.0
3.6 `-moz-` | 6.1
5.1 `-webkit-` | 12.1
11.1 `-o-` | --- ## CSS Syntax ```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ``` ### Parameter Values | Value | Description | | :--- | :--- | | `direction` | *Optional.* Specifies the direction or angle of the gradient. Can be a keyword (e.g., `to right`, `to bottom right`) or an angle value (e.g., `45deg`, `180deg`). | | `color-stop1, color-stop2, ...` | *Required.* The color values followed by an optional stop position (percentage or length). At least two colors must be specified. | --- ## Practical Examples ### 1. Left-to-Right Gradient This example demonstrates a linear gradient starting from the left, transitioning from red to yellow: ```css #grad { background-image: linear-gradient(to right, red, yellow); } ``` ### 2. Diagonal Gradient (Top-Left to Bottom-Right) This example demonstrates a diagonal linear gradient starting from the top-left corner and ending at the bottom-right corner: ```css #grad { background-image: linear-gradient(to bottom right, red, yellow); } ``` ### 3. Using Specific Angles This example demonstrates how to use a specific angle (`180deg`, which is equivalent to top-to-bottom) for the gradient direction: ```css #grad { background-image: linear-gradient(180deg, red, yellow); } ``` ### 4. Multiple Color Stops (Rainbow Effect) You can chain multiple color stops to create complex transitions. This example demonstrates a multi-color rainbow gradient: ```css #grad { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } ``` ### 5. Using Transparency You can use transparent colors (such as `rgba()`) to create smooth fade-in or fade-out effects. This example transitions from fully transparent red to fully opaque red: ```css #grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } ``` --- ## Key Considerations 1. **Image Type**: The `linear-gradient()` function generates a CSS `` data type. Therefore, it must be applied to properties that accept images, such as `background-image` or the shorthand `background`. It will not work on `background-color`. 2. **Color Stops**: If you do not specify a percentage or length for a color stop, the browser will automatically distribute the colors evenly along the gradient line. 3. **Vendor Prefixes**: Modern browsers fully support the standard syntax. However, if you are targeting legacy browsers, you may need to include prefixed versions (e.g., `-webkit-linear-gradient`). Note that legacy prefixed syntaxes sometimes use different coordinate systems (e.g., using `left` instead of `to right`).