Create a progressive background: CSS gradient from left to right, from deep to shallow

This article will demonstrate how to create a unique background effect using CSS: a gradient that smoothly transitions from left to right, and on this basis, gradually lightens from top to bottom. This design can add layering and depth to the web page and enhance the user experience.

To achieve this effect, you need to combine CSS gradient and masking technology. We use mask-image property, which is combined with a vertical gradient mask, to cleverly control the transparency of the gradient.

The following CSS code will achieve the target effect:

 html, body {
    width: 100%;
    height: 100%;
}

html {
    background-color: #ffffff; /* Provide white background*/
}

body {
    -webkit-mask-image: linear-gradient(to bottom, #000000, transparent); /* Vertical mask, top-depth, bottom-light*/
    background-image: linear-gradient(to right, rgb(39, 121, 245), rgb(81, 221, 240), rgb(118, 216, 118)); /* horizontal gradient, left deep and right shallow*/
    background-repeat: no-repeat; /* Prevent gradient duplication*/
}

Code explanation:

• html, body : Set the width and height of html and body elements to 100%, ensuring that the background covers the entire page.
• html { background-color: #ffffff; } : Set a white background for html element as the background color for the gradient.
• body { -webkit-mask-image: ... } : Use -webkit-mask-image property to apply a linear gradient mask from top to bottom ( to bottom ). The gradient transitions from black ( #000000 ) to transparent ( transparent ), achieving the effect of gradually becoming lighter from top to bottom. Note: -webkit- prefix is ??for compatibility with older browsers.
• body { background-image: ... } : Defines a linear gradient background color from left to right ( to right ), the color transitions from dark blue ( rgb(39, 121, 245) ) to light green ( rgb(118, 216, 118) ), and the middle color is rgb(81, 221, 240) to achieve a smooth transition.
• body { background-repeat: no-repeat; } : Prevent background gradients from repeating.

Through the above CSS code, you can easily create a progressive background effect with a sense of layering and visual impact. This technology has a wide range of applications in web design and is especially suitable for scenarios where key areas need to be highlighted or a specific atmosphere is created.

The above is the detailed content of How to use CSS to achieve a gradient effect of the background color transition from left to right and gradually becoming lighter from top to bottom?. For more information, please follow other related articles on the PHP Chinese website!