How to use CSS to achieve a gradient color from top to bottom in the background color effect of the search box and carousel?

CSS creates a gradient background effect of search box and carousel

In web design, how to elegantly achieve a gradient background that gradually becomes lighter from top to bottom is the key to enhancing visual appeal. This article will demonstrate how to create this gradient effect of search boxes and carousels using CSS.

Goal: Create a gradient background that gradually becomes shallower from top to bottom and smoothly transition from left to right for the search box and carousel area.

To achieve this effect, we will use linear-gradient and mask-image properties of CSS. linear-gradient is responsible for creating gradient colors, while mask-image is used as a mask to control the transparency of the gradient, thereby achieving a lighter effect from top to bottom.

The following code shows the specific implementation method:

 html, body {
    width: 100%;
    height: 100%;
    margin: 0; /* Clear default margin*/
}

body {
    /* Gradient background from left to right*/
    background-image: linear-gradient(to right, rgb(39, 121, 245), rgb(81, 221, 240), rgb(118, 216, 118));
    /* Gradient mask from top to bottom achieves lightening effect*/
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent); /* non-webkit browser compatibility*/
    background-repeat: no-repeat;
}

Code explanation:

• html, body : Set the width and height of html and body elements to 100%, and clear the default margins to ensure that the background covers the entire page.
• background-image : Defines a linear gradient background color from left to right. You can adjust the color value as needed.
• -webkit-mask-image : Use a linear gradient from black to transparent as a mask to apply to webkit kernel browsers (such as Chrome and Safari).
• mask-image : Provides compatibility support for non-webkit browsers.
• background-repeat : Set to no-repeat to prevent background image from being duplicated.

By cleverly combining linear-gradient and mask-image , we easily achieve left-to-right color transitions and top-to-bottom gradient transparency to achieve the desired visual effect. The precise color and gradient angle adjustments need to be fine-tuned according to the specific UI design draft.

The above is the detailed content of How to use CSS to achieve a gradient color from top to bottom in the background color effect of the search box and carousel?. For more information, please follow other related articles on the PHP Chinese website!