Codestin Search App

linear-gradient() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The linear-gradient() CSS function is used to create a smooth transition between two or more colors along a straight line. This function generates an image that can be applied to elements through properties such as background-image, allowing for dynamic and visually appealing backgrounds without the need for external images. Unlike solid colors, linear-gradient() produces a gradient effect that can flow in any direction - top to bottom, left to right, diagonally, or at a specific angle.

Gradients created with linear-gradient() can include multiple color stops, giving developers precise control over where colors start and end. Each color stop can also have an optional position expressed in percentages or absolute units, enabling complex and layered gradient effects. For instance, you can create a subtle fade from light blue to dark blue or a vibrant rainbow-like effect by specifying multiple colors and stops.

One useful feature of linear-gradient() is its ability to work seamlessly with other repeating-linear-gradient() functions to create repeating patterns, which is especially handy for decorative elements, buttons, or backgrounds in web design. Additionally, gradients can be combined with other CSS properties like background-blend-mode to achieve interesting visual effects by blending the gradient with other layers.

Example usage:

div {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

In this example, the gradient flows horizontally from a coral shade to a soft orange, giving the element a warm and dynamic appearance. This function is highly versatile and widely supported across modern browsers, making it an essential tool for web designers looking to enhance their layouts with smooth, customizable color transitions.

You can also use angles to define the direction of the gradient precisely:

div {
  background-image: linear-gradient(45deg, #6a11cb, #2575fc);
}

Here, the gradient runs diagonally at a 45-degree angle, transitioning from purple to blue, demonstrating how linear-gradient() can create visually engaging designs without additional markup or images.

Syntax

linear-gradient(

  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )

  ---------------------------------/ ----------------------------/

    Definition of the gradient line        List of color stops  



where <side-or-corner> = [ left | right ] || [ top | bottom ]

  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>

  and <linear-color-stop> = <color> [ <color-stop-length> ]?

  and <color-stop-length> = [ <percentage> | <length> ]{1,2}

  and <color-hint> = [ <percentage> | <length> ]

Values

<side-or-corner>The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to 'to bottom'.
<angle>A value that specifies the direction of the gradient. 0deg points upward, and positive angles represent clockwise rotation, so 90deg points toward the right.
<linear-color-stop>A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).
<color-hint>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Example

HTML

<body>



    <div class="gradient-box"></div>



</body>

CSS

.gradient-box {

    width: 100%;

    height: 300px;

    border-radius: 8px;

    

    /* Syntax: linear-gradient(direction, color1, color2, ...) */

    background: linear-gradient(to right, red 0%, blue 100%);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS linear-gradient() function. Hover over a browser icon to see the version that first introduced support for this CSS function.